码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-08-04 20:37:30      阅读:321      评论:0      收藏:0      [点我收藏+]

标签:patch   asc   overflow   ntb   cancel   实现   mouse   属性   isp   

有时候,网页上需要提供将当前页面上的数据导出为本地文件的功能,例如将页面上的一个表格导出为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元素的点击事件,就会弹出保存文件的窗口。

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

标签:patch   asc   overflow   ntb   cancel   实现   mouse   属性   isp   

原文地址:http://www.cnblogs.com/a-distant-bright-star/p/7286782.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!