简介

• 本文介绍两个下载库的使用 1. js-file-download 2. FileSaver.js 两者各有优劣。
• 使用库的意义在于，库的作者已经处理了很多问题比如兼容。而越多人使用的库也越有保证不会出现奇奇怪怪的问题。
• 记得看文档。

js-file-download

介绍

• 库比较小巧，主要文件不到2k。弊端就是不能直接根据url下载。
• 无依赖，可以直接引入js使用。
• 做了部分兼容。
• 是通过创建a标签下载 然后异步删除a标签实现。
• 接受 四个参数 data, filename, mime, bom
  • data 需要下载的内。
  • filename 下载文件的名称 需要注意的是名称需要包含文件类型 如 xls、csv
  • mime new Blob 的类型，默认为 application/octet-stream
  • bom 向文件开头追加内容。 var blobData = (typeof bom !== 'undefined') ? [bom, data] : [data]

安装

npm install js-file-download --save

使用示例

• 比较简单 README.md 写的基本很清楚。
• 需要注意的是 responseType 的类型不一定就是blob 也可能是 ArrayBuffer

import Axios from axios;
import fileDownload from 'js-file-download';

function download(url: string, filename: string) {
  Axios.get(url, {
    responseType: 'blob',
  }).then(res => {
    fileDownload(res.data, filename);
  });
}

var fileDownload = require('js-file-download');
fileDownload(data, 'filename.csv');

or

// 将 fileDownload 绑定到 vue 全局对象上
let res = await Api.exportData()
this.fileDownload(res, `xxxx.xlsx`)

FileSaver.js

介绍

• 基本兼容所有浏览器
• 支持 Blob/File/Url 三种格式下载。简直全面，而且代码内做了很多兼容处理。

安装

npm install file-saver --save

使用示例

• README.md 有介绍有示例，所以一定要看文档。

引入 saveAs() 函数

import { saveAs } from 'file-saver';

FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })

• saveAs 函数接受三个参数，第一个参数表示它支持 Blob/File/Url 三种类型的数据，第二个参数表示文件名（可选），第三个参数表示配置对象（可选）
• { autoBom: true} 自动提供 Unicode 文本编码提示（参考：字节顺序标记）

将Blob保存为文本

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

根据URL下载文件

FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

将Canvas画布保存为文件

var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});

保存文件

• 您可以在不指定文件名的情况下保存 File 构造函数。如果文件本身已经包含一个名称，则有很多方法可以获取文件实例（从存储、文件输入、新构造函数、剪贴板事件）。如果您仍想更改名称，则可以在第二个参数中更改它。

// 注意：ie 和 Edge 不支持新的 File 构造函数，
// 所以最好构造 blob 并使用 saveAs(blob, filename)

var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(file);

大佬这个文章很棒 建议阅读聊一聊 15.5K 的 FileSaver，是如何工作的？。

本部分参考其文章，绝大部份来自 FileSaver README.md文档。