使用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('下载成功!')
})
更多推荐
已为社区贡献4条内容
所有评论(0)