一、安装

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

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐