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

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
1
2
3
4
5
6

语法

saveAs()从文件保存器导入

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

传递{ 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");
1
2
3

2.2、储存文字

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

2.3、保存网址

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

在相同来源内使用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");
});
1
2
3
4

注意：标准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);
1
2
3
4

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`);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

3.2、使用：

import exportFile from '@/utils/exportFile' // 导入

exportFile.getExcel(res.data, '下载文件名称')  // 使用
1
2
3

完整代码

<template>
  <div class="hello">
   <el-button @click="download">下载</el-button>
  </div>
</template>

<script>
// 1. 引入Fuse
import exportFile from '@/utils/exportFile'

export default {
  data() {
    return {};
  },
  created() {},
  watch: {},
  methods: {
    // 下载文件
    download() {
      var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
      // res.data = file
     exportFile.getExcel(file, '下载文件名称')
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

实例2

安装

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

使用

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

情况：

// 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 保存文件的名称，需要带后缀
1
2
3
4
5
6
7
8
9
10

完整代码

<template>
  <div class="hello">
   <el-button @click="download">下载</el-button>
  </div>
</template>

<script>
// 1. 引入Fuse
	import { saveAs } from 'file-saver'

export default {
  data() {
    return {};
  },
  created() {},
  watch: {},
  methods: {
    // 下载文件
    download() {
     	const blob = new Blob(['Hello, world!'])
        saveAs(blob, 'hello world.txt')
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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) {			// 兼容IE
	                navigator.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('下载成功！')
	})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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) {			// 兼容IE
	        	navigator.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('下载成功！')
	})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27