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

有时候，网页上需要提供将当前页面上的数据导出为本地文件的功能，例如将页面上的一个表格导出为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 οnclick="download('file text', 'myfilename.txt', 'text/plain')">Create file</button>

代码实现的功能包括：

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

转载于:https://www.cnblogs.com/a-distant-bright-star/p/7286782.html

如何将前端数据保存到文件相关推荐

java jtable导出txt_如何将jtable中的文本数据保存到文件中
展开全部 package com.dhee.the_first_group.Finance; import java.awt.Color; import java.awt.Dimension; imp ...
android 把数据保存到文件中的实例
/*** 把字符串写入文件* @param data* @param fileName*/ public void writeDataToFile(String data,String fileNam ...
java数据保存到文件_Java把数据存储到本地txt文件
码农公社 210.net.cn 210= 1024 10月24日一个重要的节日--码农(程序员)节 Java把数据存储到本地txt文件 java存储数据,方便打印日志等 1.覆盖以前的数据 tr ...
python中print又可将数据写入文件_Python 通过print_lol将数据保存到文件中
1. 定义一个print_lol函数来控制列表的缩进和写入位置 import sys """this is a new fuction, which work for a ...
【存储过程】从数据库中读取数据保存到文件中
2019独角兽企业重金招聘Python工程师标准>>> 由于初期规划不好,项目管理的action都存入到数据库中了,而实际上应该以配置文件的形式保存的,所以现在想改过来.一条条复制是 ...
IFIX数据写入html,ifix历史曲线如何保存到文件？
摘要:本文对如何将ifix历史曲线保存到文件的具体操作步骤进行了详细介绍,供使用时参考. 概述-后台进程是htc.exe 1.安装FIX58_ClassicHistorian_001.exe, 2.修 ...
Qt简单编程--数组保存到文件
对于需要操作下位机的情况,往往需要保存二进制数据到文件.一般的做法是读数据到数组缓冲,再把数组的数据保存到文件. 保存数组到文件,很简单. QFile f("flash_data.bin&q ...
Project 2 ：Python爬虫源码实现抓取豆瓣电影爱情电影Top200并保存到文件
基于python3.6-pycharm编写的,都已经调试过了,欢迎大家提出交流意见. 关于一些基础的数据网页分析(比如为什么是这个url)没有过多赘述,看不懂的自行百度. 源码可以直接拷贝运行. 转载 ...
Project 1 ：Python爬虫源码实现抓取淘宝指定商品所有评论并保存到文件
学习python一个多月,掌握了一些基础,因为开淘宝店的原因,平时会抓取一些淘宝数据,尝试用简单的语言写一些python爬虫,关键信息都注释在源码内.这是我的第一个爬虫程序,基于python3.6-p ...

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

如何将前端数据保存到文件相关推荐

最新文章

热门文章