有关导出文件流的问题

一、安装

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) => {
                // 有时后台的res就直接是文件流，可以不用new Blob([fileStream])，直接下载fileStream就好
                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('下载成功！')
    })