vue中使用file-saver插件导出文件（表格，图片，word文档等）

原创已于 2022-06-10 17:05:12 修改 · 3.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #npm

于 2022-05-30 10:46:52 首次发布

随记专栏收录该内容

12 篇文章

订阅专栏

博客介绍了file-saver库在js和ts中的安装方法，分别使用npm install file-saver --save和npm install @types/file-saver --save-dev。还说明了引入方式，即import { saveAs } from ‘file-saver’。同时讲解了使用时需后端返回二进制文件流，在接口定义声明responseType: ‘blob’，并给出具体使用示例。

1. 安装
js安装 npm install file-saver --save
ts安装 npm install @types/file-saver --save-dev
2.引入
import { saveAs } from ‘file-saver’;
3.使用
接口中声明：
想要使用它需要后端返回的是二进制文件流，所以在接口定义的时候要声明responseType: ‘blob’;
例如：
在这里插入图片描述
写法以自己项目中axios的封装方式为准。
具体使用：

``
const params = {};
exportPatrolorder(params).then(res=>{
const blob = new Blob([res], {
type: ‘application/vnd.ms-excel;charset=utf-8’
});
saveAs(blob, this.exportFileTitle);
})

代码中的type要和后端定义的保持一致，this.exportFileTitle是导出后的文件名，可以自定义。
导出不同类型的文件只是type的不同。

。。。。
使用过程中发现这种写法在导出excel表格的时候，苹果系统导出表格会有文件后缀名是xlw的情况，此时需要把saveAs(blob, this.exportFileTitle)中的title指定后缀名，例如：saveAs(blob, `${this.exportFileTitle}.xls`)。这样就可以解决了