首页 > 代码库 > 如何将前端数据保存到文件
如何将前端数据保存到文件
有时候,网页上需要提供将当前页面上的数据导出为本地文件的功能,例如将页面上的一个表格导出为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>
代码实现的功能包括:
- 页面上放一个隐藏的
<a>
元素 - 当用户要导出文件时(比如点击了导出按钮),根据导出内容创建一个Blob对象并产生对应的url
- 将 a 元素的href设置为上述url, 并设置 download属性
- 最后触发一个a元素的点击事件,就会弹出保存文件的窗口。
如何将前端数据保存到文件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。