使用file-saver导出文件

一、安装

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

二、使用

导入 saveAs

	import { saveAs } from 'file-saver'

保存文本

	const blob = new Blob(['Hello, world!'])
    saveAs(blob, 'hello world.txt')

预览图片

	saveAs('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')

保存文件

	const blob = new Blob([fileStream])		// fileStream 是文件流，一般从后台获取
    saveAs(blob, fileName)					// fileName 保存文件的名称，需要带后缀

三、通用场景

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

• 下载本地文件

	// 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('下载成功！')
	})

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

	// 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('下载成功！')
	})