vue中，使用file-saver导出文件，下载Excel文件、下载图片、下载文本
导出
·
vue中，使用file-saver导出文件，下载Excel文件、下载图片、下载文本
1、基本介绍
npm地址：https://www.npmjs.com/package/file-saver
安装
# Basic Node.JS installation
npm install file-saver --save
bower install file-saver
# Additional typescript definitions
npm install @types/file-saver --save-dev
语法
saveAs()从文件保存器导入
import { saveAs } from 'file-saver';
FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })
传递{ autoBom: true }如果你想FileSaver.js自动提供Unicode文本编码提示（：见字节顺序标记）。请注意，只有在您的Blob类型已charset=utf-8设置的情况下才能执行此操作。
2、示例
2.1、使用保存文字 require()
var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
2.2、储存文字
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
2.3、保存网址
FileSaver.saveAs("https://httpbin.org/image", "image.jpg");
在相同来源内使用URL只会使用a[download]。否则，它将首先检查它是否支持带有同步头请求的cors标头。如果是这样，它将下载数据并使用Blob URL保存。如果没有，它将尝试使用下载它a[download]。
标准的W3C File API Blob接口并非在所有浏览器中都可用。 Blob.js是Blob解决此问题的跨浏览器实现。
2.4、保存画布
var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});
注意：标准HTML5 canvas.toBlob()方法并非在所有浏览器中都可用。 canvas-toBlob.js是一个跨浏览器canvas.toBlob()，可以对此进行填充。
2.5、保存文件
您可以保存File构造函数而无需指定文件名。如果文件本身已经包含名称，则有很多方法可以获取文件实例（从存储，文件输入，新构造函数，剪贴板事件）。如果仍要更改名称，则可以在第二个参数中更改它。
// Note: Ie and Edge don't support the new File constructor,
// so it's better to construct blobs and use saveAs(blob, filename)
var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(file);
3、应用实例
项目中使用file-saver封装几种常见格式的导出。
实例1
3.1、在文件exportFile.js中封装方法：
src\utils\exportFile.js
import FileSaver from "file-saver";
export default class fileSave {
/**
* 导出Excel文件
* @param {*} res 文件流
* @param {*} name 文件名
*/
static getExcel(res, name) {
let blob = new Blob([res], {
type: "application/vnd.ms-excel"
});
FileSaver.saveAs(blob, name + ".xlsx");
}
/**
* 导出CSV文件
* @param {*} res 文件流
* @param {*} name 文件名
*/
static getCsv(res, name) {
let blob = new Blob([res], {
type: "application/vnd.ms-excel"
});
FileSaver.saveAs(blob, name + ".csv");
}
/**
* 导出图片1
* @param {*} url 图片地址
* @param {*} name 文件名
*/
static getImgURLs(url, name) {
let last = url.substring(url.lastIndexOf("."), url.length);
FileSaver.saveAs(url, `${name}${last}`);
}
/**
* 导出图片2
* @param {*} res 文件流
* @param {*} name 文件名
*/
static downLoadImg(res, filename) {
let blob = new Blob([res], {
type: "image/jpeg"
});
FileSaver.saveAs(blob, `${filename}.jpg`);
}
}
3.2、使用：
import exportFile from '@/utils/exportFile' // 导入
exportFile.getExcel(res.data, '下载文件名称') // 使用
完整代码
<template>
<div class="hello">
<el-button @click="download">下载</el-button>
</div>
</template>
<script>
// 1. 引入Fuse
import exportFile from '@/utils/exportFile'
export default {
data() {
return {};
},
created() {},
watch: {},
methods: {
// 下载文件
download() {
var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
// res.data = file
exportFile.getExcel(file, '下载文件名称')
},
},
};
</script>
实例2
安装
npm install file-saver --save
# 如使用TS开发，可安装file-saver的TypeScript类型定义
npm install @types/file-saver --save-dev
使用
import { saveAs } from 'file-saver' // 导入 saveAs
情况：
// 1、保存文本
const blob = new Blob(['Hello, world!'])
saveAs(blob, 'hello world.txt')
// 2、预览图片
saveAs('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')
// 3、保存文件
const blob = new Blob([fileStream]) // fileStream 是文件流，一般从后台获取
saveAs(blob, fileName) // fileName 保存文件的名称，需要带后缀
完整代码
<template>
<div class="hello">
<el-button @click="download">下载</el-button>
</div>
</template>
<script>
// 1. 引入Fuse
import { saveAs } from 'file-saver'
export default {
data() {
return {};
},
created() {},
watch: {},
methods: {
// 下载文件
download() {
const blob = new Blob(['Hello, world!'])
saveAs(blob, 'hello world.txt')
},
},
};
</script>
4、通用场景
一般开发过程中，需要下载本地文件，或者从服务器下载文件，可使用下面封装的方法。
4.1、下载本地文件
// 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('下载成功！')
})
4.2、下载服务器文件（服务器返回文件流）
// 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('下载成功！')
})
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
13
0- 0
已为社区贡献5条内容
所有评论(0)