使用HTML5在本地写入CSV文件

Question

我想知道HTML5是否允许用户保存/写入用户文件系统中的本地文件。我问这个，因为我知道，使用HTML5，您现在可以从客户端导出数据并将其下载为CSV文件。

如果不是HTML5，那么在客户端脚本中本地覆盖内容或创建CSV（或任何其他类型的文件）的最佳方法是什么？

Answer 1

<强>功能：

function exportData() {
    var data = '';
    for (var i=1;i<=2;i++) {
        var sep = '';
        for (var j=1;j<=4;j++) {
            data +=  sep + document.getElementById(i + '_' + j).value;
            sep = ',';
        }
        data += '\r\n';
    }
    var exportLink = document.createElement('a');
    exportLink.setAttribute('href', 'data:text/csv;base64,' + window.btoa(data));
    exportLink.appendChild(document.createTextNode('test.csv'));
    document.getElementById('results').appendChild(exportLink);
}

<强>标记：

<input type="number" id="1_1" value="2">,
<input type="number" id="1_2" value="1">,
<input type="number" id="1_3" value="4">,
<input type="number" id="1_4" value="3">
<br>
<input type="number" id="2_1" value="1">,
<input type="number" id="2_2" value="2">,
<input type="number" id="2_3" value="3">,
<input type="number" id="2_4" value="4">
<br>
<button onclick="exportData()">Export as CSV</button>
<div id="results"></div>

<强>演示：

单击您获得链接的按钮，单击该链接即可获得文件。更改值，再次单击该链接，您将获得另一个文件。 Firefox让我每次都选择Excel打开它，但我不知道这是我的配置还是一般性问题。

Live Demo

<强>参考：

Is it possible to use any HTML5 fanciness to export local storage to Excel?

Answer 2

我知道这是一个老问题。 测试ummahusla＆＃39;回答它确实有效，但下载文件的一个小问题，在我的chrome中它会下载一个无名文件。

经过一些测试后，下载的工作代码为csv文件。

    data= 'data:application/csv;charset=utf-8,' + encodeURIComponent(data);
    var exportLink = document.createElement('a');
    exportLink.setAttribute('href', data);
    exportLink.setAttribute('download','test.csv');
    exportLink.setAttribute('target','_blank');
    exportLink.appendChild(document.createTextNode('test.csv'));

    document.getElementById('results').appendChild(exportLink);