vue中，使用file-saver导出文件，下载Excel文件、下载图片、下载文本

1、基本介绍

npm地址：https://www.npmjs.com/package/file-saver

安装

# Basic Node.JS installation
npm install file-saver --save
bower install file-saver# Additional typescript definitions
npm install @types/file-saver --save-dev

语法

saveAs()从文件保存器导入

import { saveAs } from 'file-saver';
FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })

传递{ autoBom: true }如果你想FileSaver.js自动提供Unicode文本编码提示（：见字节顺序标记）。请注意，只有在您的Blob类型已charset=utf-8设置的情况下才能执行此操作。

2、示例

2.1、使用保存文字 require()

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

2.2、储存文字

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

2.3、保存网址

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

在相同来源内使用URL只会使用a[download]。否则，它将首先检查它是否支持带有同步头请求的cors标头。如果是这样，它将下载数据并使用Blob URL保存。如果没有，它将尝试使用下载它a[download]。

标准的W3C File API Blob接口并非在所有浏览器中都可用。 Blob.js是Blob解决此问题的跨浏览器实现。

2.4、保存画布

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

注意：标准HTML5 canvas.toBlob()方法并非在所有浏览器中都可用。 canvas-toBlob.js是一个跨浏览器canvas.toBlob()，可以对此进行填充。

2.5、保存文件

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

// Note: Ie and Edge don't support the new File constructor,
// so it's better to construct blobs and use saveAs(blob, filename)
var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(file);

3、应用实例

项目中使用file-saver封装几种常见格式的导出。

实例1

3.1、在文件exportFile.js中封装方法：

src\utils\exportFile.js

import FileSaver from "file-saver";
export default class fileSave {/*** 导出Excel文件* @param {*} res   文件流* @param {*} name  文件名*/static getExcel(res, name) {let blob = new Blob([res], {type: "application/vnd.ms-excel"});FileSaver.saveAs(blob, name + ".xlsx");}/*** 导出CSV文件* @param {*} res   文件流* @param {*} name  文件名*/static getCsv(res, name) {let blob = new Blob([res], {type: "application/vnd.ms-excel"});FileSaver.saveAs(blob, name + ".csv");}/*** 导出图片1* @param {*} url 图片地址* @param {*} name  文件名*/static getImgURLs(url, name) {let last = url.substring(url.lastIndexOf("."), url.length);FileSaver.saveAs(url, `${name}${last}`);}/*** 导出图片2* @param {*} res 文件流* @param {*} name  文件名*/static downLoadImg(res, filename) {let blob = new Blob([res], {type: "image/jpeg"});FileSaver.saveAs(blob, `${filename}.jpg`);}
}

3.2、使用：

import exportFile from '@/utils/exportFile' // 导入exportFile.getExcel(res.data, '下载文件名称')  // 使用

完整代码

实例2

安装

npm install file-saver --save
# 如使用TS开发，可安装file-saver的TypeScript类型定义
npm install @types/file-saver --save-dev

使用

import { saveAs } from 'file-saver'  // 导入 saveAs

情况：

// 1、保存文本
const blob = new Blob(['Hello, world!'])
saveAs(blob, 'hello world.txt')// 2、预览图片
saveAs('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')// 3、保存文件
const blob = new Blob([fileStream])		// fileStream 是文件流，一般从后台获取
saveAs(blob, fileName)					// fileName 保存文件的名称，需要带后缀

完整代码

4、通用场景

一般开发过程中，需要下载本地文件，或者从服务器下载文件，可使用下面封装的方法。

4.1、下载本地文件

	// file.js 封装下载本地文件方法import axios from 'axios'import { saveAs } from 'file-saver'/*** @params {string} localFileName 本地文件名称* @params {string} saveFileName 下载的文件名称* @retuen {promise}*/export const downloadLocalFile = (localFileName, saveFileName) => {return new Promise((resolve, reject) => {axios({url: `/file/${localFileName}`,	// 本地文件夹路径+本地文件名称(若资源在服务器，且是具体的路径，这里可改成该资源路径，此时封装的方法需要微调，入参的localFileName改成资源路径resource)method: 'get',					responseType: 'blob',			//	arraybuffer	也可}).then(res => {const blob = new Blob([res.data])if (navigator.msSaveBlob) {			// 兼容IEnavigator.msSaveBlob(blob, saveFileName)} else {const url = window.URL.createObjectURL(blob)saveAs(url, saveFileName)}resolve()}).catch(err => {// 这里可以统一处理错误，比如"未找到相关文件"，"下载失败"等if (err.message === 'Request failed with status code 404') {// 提示or弹框：未找到相关文件} else {// 提示or弹框：下载失败}reject(err)})})}// 使用（注意文件格式的后缀名）downloadLocalFile('excelFile.xlsx', 'newExcelFile.xlsx').then(res => {// 下载成功后的操作console.log('下载成功！')})

4.2、下载服务器文件（服务器返回文件流）

	// file.js 封装下载本地文件方法import axios from 'axios'import { saveAs } from 'file-saver'/*** @params {stream} fileStream 服务器返回的文件流* @params {string} saveFileName 下载的文件名称* @retuen {promise}*/export const downloadFile = (fileStream, saveFileName) => {return new Promise((resolve, reject) => {const blob = new Blob([fileStream])if (navigator.msSaveBlob) {			// 兼容IEnavigator.msSaveBlob(blob, saveFileName)} else {const url = window.URL.createObjectURL(blob)saveAs(url, saveFileName)}resolve()}) }// 使用（注意文件格式的后缀名）const fileStream = await xxApi()  // 请求后台接口，获取文件流downloadFile(fileStream, 'file.pdf').then(res => {// 下载成功后的操作console.log('下载成功！')})