如何将前端数据保存到文件

有时候，网页上需要提供将当前页面上的数据导出为本地文件的功能，例如将页面上的一个表格导出为csv文件。这个功能看似简单，实际上却没有什么直接的方法。由于导出文件的操作（比如浏览文件目录，创建本地文件等）已经超出了浏览器内JS解释器的职责范围，需要和操作系统交互了，所以如果没有浏览器提供接口支持，是没法导出文件的。
但是，有一个巧妙的办法，就是使用<a>元素（https://stackoverflow.com/questions/13405129/javascript-create-and-save-file ）。 这个办法巧妙结合了两个小技巧：1. http链接可以以下载文件的方式打开 2. 通过URL.createObjectURL(object)可以为一个JS
File/Blob对象创建一个 URL。

代码如下：

function download(text, name, type) {
  var a = document.getElementById("a");
  var file = new Blob([text], {type: type});
  a.href = URL.createObjectURL(file);
  a.download = name;
  a.dispatchEvent(new MouseEvent(‘click‘, {‘bubbles‘: false, ‘cancelable‘: true}));
}

<a href="" id="a">click here to download your file</a>
<button onclick="download(‘file text‘, ‘myfilename.txt‘, ‘text/plain‘)">Create file</button>

代码实现的功能包括：

1. 页面上放一个隐藏的 <a>元素
2. 当用户要导出文件时（比如点击了导出按钮），根据导出内容创建一个Blob对象并产生对应的url
3. 将 a 元素的href设置为上述url， 并设置 download属性
4. 最后触发一个a元素的点击事件，就会弹出保存文件的窗口。