javascript - 将 Html 表格内容导出到具有自定义文件名的 CSV 文件(应该在 IE 中工作)

Question

我是网络编程的新手，我正在尝试将 Html 表的内容保存到 CSV 文件。 CSV 文件需要有一个自定义文件名，并且应该在 IE、FF 和 Chrome 中工作。这是我的要求。

这是我所拥有的:

input.addEventListener('click', function (e) 
{
  var fileName = cntrySel.value + '-Data.csv';
  var a = document.createElement('a');
  var data=$('#output').table2CSV({delivery:'value'});
  blob = new Blob([data], { type: 'text/csv' }); //new way
  var csvUrl = URL.createObjectURL(blob);
  a.download = fileName;
  a.href = csvUrl;
  a.click();
  a.setAttribute('onClick','');
  e.preventDefault();

});

上面的代码适用于 FF 和 Chrome(不适用于 IE)，并且使用 Html5 下载属性。但为了使其在 IE 中工作，我开始研究 XmlHttpRequest。

修改以下代码以包含 XmlHttpRequest:

  input.addEventListener('click', function (e) 
  {
    var fileName = cntrySel.value + '-Data.csv';
    var data=$('#output').table2CSV({delivery:'value'});
    blob = new Blob([data], { type: 'text/csv' }); 
    var csvUrl = URL.createObjectURL(blob);

    var xhr = new XMLHttpRequest();
    xhr.open("GET", csvUrl, false);
    xhr.setRequestHeader("Content-Type", "text/csv");
    xhr.setRequestHeader("Content-Disposition", "attachment; filename=fileName");  

    xhr.send(null); 


     if (xhr.status !== 200) throw new Error(xhr.statusText);
        var type = xhr.getResponseHeader("Content-Type");
        if (!type.match(/^text/)) 
            throw new Error("Expected textual response; got: " + type);

     return xhr.responseText;
    });

在调试器中，我可以 xhr.responseText 包含我正在查找的数据集。但是，我不知道如何使用自定义文件名将此数据保存到 CSV，并且可以在所有浏览器上使用。

非常感谢任何帮助。谢谢!

Answer 1

您可以使用这个库:

https://github.com/eligrey/FileSaver.js

FileSaver.js implements the W3C saveAs() FileSaver interface in browsers that do not natively support it.

这是一个演示

http://eligrey.com/demos/FileSaver.js/

您发送数据以及文件的名称和类型

或者，要仅保存 CSV，您可以使用这个简单的 javascript

var myCsv = "Col1,Col2,Col3\nval1,val2,val3";
window.open('data:text/csv;charset=utf-8,' + escape(myCsv));

当然这个 myCsv var 是你的数据