FileSaver 文件导出

1.前言

• 本节主要讲述如何将后台返回的JSON以文件的形式保存到本地
• 官方文档
• 兼容性(转载)

Browser	Constructs as	Filenames	Max Blob Size	Dependencies
Firefox 20+	Blob	Yes	800 MiB	None
Firefox < 20	data: URI	No	n/a	Blob.js
Chrome	Blob	Yes	500 MiB	None
Chrome for Android	Blob	Yes	500 MiB	None
Edge	Blob	Yes	?	None
IE 10+	Blob	Yes	600 MiB	None
Opera 15+	Blob	Yes	500 MiB	None
Opera < 15	data: URI	No	n/a	Blob.js
Safari 6.1+*	Blob	No	?	None
Safari < 6	data: URI	No	n/a	Blob.js
Safari 10.1+	Blob	Yes	n/a	None

2.基本思路

• 先将JSON数据转换成blob数据
• 使用FileSaver插件将blob数据转换成文件进行保存

3.blob数据转换

• Blob接收一个数组，数组元素必须是字符串或者数字，不能是数组或者对象

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"})

//表格数据
var dataData = [
     { name: "张三", age: 20 }, { name: "李四", age: 21 }, { name: "王五", age: 22 }
]
//
var blob = new Blob([JSON.stringify(dataData)], {type : 'application/json'})  

3.FileSaver基本使用

• 引入插件

<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

• 调用

var blob = new Blob(["Hello, world!"], { type: "text/plain;charset=utf-8" })
saveAs(blob, "data.json")

4.扩展

• 在不同的环境中引入该插件时，使用方式上有一些差异，具体的可以看源码进行分析

(function(global, factory) {
    if (typeof define === "function" && define.amd) {
        console.log('require.js引入')
        define([], factory);
    } else if (typeof exports !== "undefined") {
        console.log('node环境引入')
        factory();
    } else {
        console.log('script标签引入')
        var mod = {
            exports: {}
        };
        factory();
        //在当前运行环境(window)挂载FileSaver字段，但是貌似无用，因为mod.exports时空对象
        global.FileSaver = mod.exports;
    }
}(this, someFn)