使用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) {         // 兼容IEnavigator.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) {          // 兼容IEnavigator.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('下载成功！')})

使用file-saver导出文件相关推荐

纯JS导入导出文件（XLSX）
主要整理了一下怎样使用前端导入导出txt.csv和excel文件,代码都在chrome运行成功目录 1. 前置知识 1.1 Blob类型 1.2 File API 1.3 FileReader 1. ...
java保存不了_在使用Java写入文件时，文件不能保存在文件夹中
什么即时通讯要做的只是让用户选择一个目录来保存文本文件,问题是即时通讯尝试选择一个文件夹即时通讯创建在我的桌面上,但是当我用JFileChooser选择文件夹,并让我的代码做工作它仍然保存在文件夹和桌 ...
tensorflow model save and restore
TensorFlow 模型保存/载入我们在上线使用一个算法模型的时候,首先必须将已经训练好的模型保存下来.tensorflow保存模型的方式与sklearn不太一样,sklearn很直接,一个skl ...
android 数据存储----android短信发送器之文件的读写（手机+SD卡）
本文实践知识点有有三: 1.布局文件,android布局有相对布局,线性布局,绝对布局,表格布局,标签布局等.各个布局能够嵌套的.本文的布局文件就是线性布局的嵌套 <LinearLayout x ...
Oracle数据库的导入和导出的两种方式
首先,我们导入导出数据,肯定是要通过oracle自带的可运行程序来完成数据的导入导出工作,imp.exe 和exp.exe这两个可运行文件都放在oracle安装目录下的BIN目录下. 1.以cmd命令 ...
php充值注入,PHP注入一路小跑
PHP注入一路小跑 [ 2006-04-20 14:16:55 | 作者: 承諾 ] 字体大小: 大 | 中 | 小很老的了,我是给我自己看的.忘了好多,补习一下 ' or '1=1 '/* '%2 ...
Oracle数据库导入导出 imp/exp备份还原
Oracle数据导入导出imp/exp Oracle数据导入导出imp/exp 在cmd的dos命令提示符下执行,而不是在sqlplus里面,但是格式一定要类似于: imp/exp 用户名/密码@se ...
使用exp命令实现Oracle数据备份(数据导出)
在平时的工作中,我们难免会遇到要备份数据,当然,用pl/sql可以实现通过导出数据来备份数据,但有时我们需要定制一些脚本来实现数据备份时,就不得不用到exp命令. 用exp来进行数据备份时可以有三种备 ...
Oracle ：备份、还原数据库
一 . 数据的导入与导出 1. 数据的导出 : 输入exp 指令 ,没有数据的表不导出 . 2. 数据的导入 :进入到备份文件所在路径 ,输入imp 指令 . 实际工作中不使用这种方式导出 ...
使用keytool 生成证书
keytool 简介 keytool 是java 用于管理密钥和证书的工具,官方文档其功能包括: 创建并管理密钥创建并管理证书作为CA 为证书授权导入导出证书主要格式 keytool 采用 ...

使用file-saver导出文件

一、安装

二、使用

三、通用场景

使用file-saver导出文件相关推荐

最新文章

热门文章