4

我想为我在浏览器中以 Javascript 生成的 CSV 提供下载链接。数据 URI 是一个显而易见的选择，但它们在 IE 中对 CSV 不起作用。

问题 #1：是否有任何跨浏览器的方式可以完全在客户端执行此操作？

我很确定答案是否定的。下一种方法是生成一个链接，比如/data_download?data=...，并拥有一个相应的服务器端资源，该资源只响应data来自查询字符串的字段内容。现在的问题似乎是 IE 的最大 URL 长度大约是 2 KB，我不想在我的系统中建立这个限制。

所以我创建了一个服务器端资源，这样我就可以/data_download使用表单数据发布到，其中“数据”属性是 CSV 内容，并使用表单的“数据”字段进行响应。这似乎可行，但这是一个痛苦的 b/c 我需要<form>在客户端标记中有一个，即使我设置了mimetype正确，我也会在浏览器中收到警告，让我认为这会在某些浏览器中中断：

资源解释为文档，但使用 MIME 类型 text/csv 传输：“http://localhost:8001/data_download”

问题 #2：有没有更好的方法来做到这一点，它具有以下部分或全部特征：

  • 无状态：我不会在服务器上创建令牌或任何需要在请求之间存储状态的东西
  • 使用 GET 请求：这样我就可以只拥有一个<link>标签而不是整个<form>
4

2 回答 2

0

看看http://tshrestha.blogspot.com/2013/05/stupid-download-of-browser-self.html FF20+ 和 Chrome 支持带有文件名的 data-uri（锚元素的下载属性）。

您可以通过以下方式使其在 IE 中完全在客户端工作：

if(/MSIE/.test(navigator.userAgent) && document.execCommand) {
    var oWin = window.open("about:blank", "_blank");
    oWin.document.write("your text goes here");
    oWin.document.close();
    var success = oWin.document.execCommand('SaveAs', true)
    oWin.close();
    return false; //do NOT follow the link
}

问题是用户必须提供文件名 + .csv 或任何其他扩展名。:-(

于 2013-05-08T06:15:55.730 回答
0

尽管该问题要求某些 IE 兼容性，但这不在问题标题中，所以我将这个解决方案发布给那些在这里用谷歌搜索的人。这是我的解决方案，将表格转换为客户端的 csv，并提供下载按钮。可能可以与 Ustaman 的解决方案相结合，形成一个完全跨浏览器的解决方案。

HTML：

<a download="report.csv" id="csvClick" href="#">Download CSV</a>
<table id="myTable">... </table>
<script>
makeCSV("csvClick", "myTable"); 
function makeCSV (link, targetTable) {
    var csvLink=document.getElementById(link);
    var dataurlHeader = "data:text/csv;charset=utf-8,";
    var dataurlContent = "";

    var table = document.getElementById(targetTable);
    for (var i = 0, row; row = table.rows[i]; i++) {
       // row references rows
       if (i > 0){
           dataurlContent += "\n";
       }
       for (var j = 0, column; column = row.cells[j]; j++) {
         // column references columns
         if (j > 0) {
             dataurlContent += ",";
         }
         dataurlContent += column.innerHTML;
       }  
    }
    dataurlContent = encodeURIComponent(dataurlContent);
    csvLink.href = "" + dataurlHeader + dataurlContent;
}
</script>
于 2015-09-02T16:36:38.947 回答