FileSaver.js导出json文件和文本

  最近刚刚写了个json数据导出生成Excel文件的,顺便总结下利用FileSaver.js导出其他文件的,这里要注意的一个点就是,当导出的是json文件或是txt文件时,导出的内容要是字符串,特别当时导出的数据是json数据时,要记得转一把。好了,不多说,直接上一个小小的demo,如下:

下载地址:

https://github.com/eligrey/FileSaver.js

 1 <!DOCTYPE html>
 2 <html>
 3
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>导出生成json文件和文本</title>
 7     <script src="js/FileSaver.min.js"></script>
 8 </head>
 9
10 <body>
11 <button onclick="downloadJson(students)">导出生成json文件</button>
12 <button onclick="downloadText(students)">导出生成文本</button>
13 </body>
14 <script>
15     var students = [{
16         "name": "小明1",
17         "age": "6",
18         "sex": "男",
19         "height": "60"
20     }, {
21         "name": "小明2",
22         "age": "7",
23         "sex": "男",
24         "height": "70"
25     }, {
26         "name": "小明3",
27         "age": "8",
28         "sex": "男",
29         "height": "80"
30     }];
31     // 导出生成json文件
32     function downloadJson(data) {
33         var blob = new Blob([JSON.stringify(data)], { type: "" });
34         saveAs(blob, "hello.json");
35     }
36     // 导出生成文本
37     function downloadText(data) {
38         var blob = new Blob([JSON.stringify(data)], { type: "text/plain;charset=utf-8" });
39         saveAs(blob, "hello.txt");
40     }
41
42 </script>
43
44 </html>

原文地址:https://www.cnblogs.com/absolute-child/p/8111541.html

时间: 2024-10-29 21:00:33

FileSaver.js导出json文件和文本的相关文章

js vs2013中允许js访问json文件的解决方案

js  vs2013中允许js访问json文件的解决方案 <?xml version="1.0" encoding="utf-8"?> <!-- 有关如何配置 ASP.NET 应用程序的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=169433 --> <configuration> <system.web> <compilation debug="tr

Web 端 js 导出csv文件(使用a标签)

前言 导出文件,使用最多的方式还是服务器端来处理.比如jsp 中使用response 的方式. 但是,有时候可能就想使用web 前端是否也可以把页面上的内容导出来呢? 比如说,导出页面的一个表格. 这个需求肯定是有答案的,只是对于各浏览器处理会稍微不一样.(主要是IE 和其他浏览器的区别). 在IE中使用ActiveXObject 实现,在firefox 和Chrome 中使用  a 标签(或者js)就可以实现了. 这里主要讲一下其他浏览器中的实现. 使用 a 标签实现方式 直接上例子: 1 <

【转载】JS导出CSV文件

转自:http://www.cnblogs.com/dengnan/p/3990211.html 通过自己实际测试有以下几种方法 方法一通过a标签实现,把要导出的数据用"\n"和","拼接成一个字符串,然后把字符串放到href中,这种方法只支持chrome,firefox等非ie浏览器 html页面代码如下 <!DOCTYPE html> <html> <head> <meta http-equiv="conten

使用Scrapy命令行工具【导出JSON文件】时编码设置

Windows 10家庭中文版,Python 3.6.4,virtualenv 16.0.0,Scrapy 1.5.0, 使用scrapy命令行工具建立了爬虫项目(startproject),并使用scrapy genspider建立了爬虫,用于抓取某中文门户网站首页的 新闻标题及其链接,全程都在虚拟环境(virtualenv)中执行. 使用scrapy crawl执行爬虫程序并导入一个json文件,此时可以看到,命令行窗口显示的 新闻标题是中文,但在打开导出的json文件时,其新闻标题显示为以

06 js 读取 json 文件

创建一个json [ { "name":"abc", "sex":"old", }, { "name":"cbd", "sex":"old", }, { "name":"bbs", "sex":"beatiful", } ] js对json进行读取 window.onl

nodejs中间件xlsx.js导出excel文件使用方法封装(原创)

之前的项目一直使用的是nodejs的node-xlsx.js中间件,最近的项目部署时不能使用外网,而node-xlsx.js的路径太长不能U盘复制,现在改用xlsx.js中间件. 现在把自己封装的使用方法分享出来,和大家一起学习. 代码很简单,轻喷. /** * Created by Administrator on 2016/11/17. * 使用xlsx中间件,传入表头[数组],表内数据[对象数组],文件名[string] //var header=["姓名",'年龄','性别']

js读取json文件的方式——原生js,juqery,extjs

原生js 一,ajax方式. var xmlhttp=new XMLHttpRequest();xmlhttp.open('get','json/data.json',true);xmlhttp.send(null);xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4) { if(xmlhttp.status==200){ console.log(json_encode(xmlhttp.responseText)); }

[转]纯js导出json到excel(支持chrome)

转自:http://blog.csdn.net/educast/article/details/52775559 function JSONToExcelConvertor(JSONData, FileName, ShowLabel) { //先转化json var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData; var excel = '<table>'; //设置表头 var row = &q

HTML5实现本地JSON文件的读写

参考: 使用HTML5来实现本地文件读取和写入  (FileReader读取json文件,FileSaver.js保存json文件) w3school <input>标签 FileReader WebAPI接口 FileSaver.js下载地址 FileSaver.js介绍 JS创建.写入.读取本地文件(txt)   (ActiveXObject 这玩意根本不能用,IE10 和 Chrome都试了) HTML 5中的文件处理之File Writer API  (FileSaver和FileWr