首页 > 代码库 > 如何将前端数据保存到文件

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

有时候,网页上需要提供将当前页面上的数据导出为本地文件的功能,例如将页面上的一个表格导出为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 = http://www.mamicode.com/URL.createObjectURL(file);"" 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元素的点击事件,就会弹出保存文件的窗口。

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