vue中，使用file-saver导出文件，下载Excel文件、下载图片、下载文本
vue中，使用file-saver导出文件，下载Excel文件、下载图片、下载文本
1、基本介绍
npm地址：file-saver - npm
2、安装
# Basic Node.JS installation
npm install file-saver --save
bower install file-saver
# Additional typescript definitions
npm install @types/file-saver --save-dev
3、示例
使用保存文字 require()
let FileSaver = require('file-saver');
let blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
储存文字
let blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
保存网址
FileSaver.saveAs("https://httpbin.org/image", "image.jpg");
在相同来源内使用URL只会使用a[download]。否则，它将首先检查它是否支持带有同步头请求的cors标头。如果是这样，它将下载数据并使用Blob URL保存。如果没有，它将尝试使用下载它a[download]。
保存画布
let canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});
注意：标准HTML5 canvas.toBlob()方法并非在所有浏览器中都可用。 canvas-toBlob.js是一个跨浏览器canvas.toBlob()，可以对此进行填充。
保存文件
// Note: Ie and Edge don't support the new File constructor,
// so it's better to construct blobs and use saveAs(blob, filename)
let file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(file);
实例1
在文件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`);
}
}
使用：
import exportFile from '@/utils/exportFile' // 导入
exportFile.getExcel(res.data, '下载文件名称') // 使用
实例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、预览图片--打开新窗口预览文件（pdf、img）
saveAs('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')
// 3、保存文件
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('下载成功！')
})
下载服务器文件（服务器返回文件流）
import { saveAs } from 'file-saver'
import axios from 'axios'
import { Message } from 'element-ui'
/**
* @params {stream} fileStream 服务器返回的文件流
* @params {string} saveFileName 下载的文件名称
* @retuen {promise}
*/
export const downloadFile = (fileStream, saveFileName) => {
return new Promise((resolve, reject) => {
const blob = new Blob([fileStream], {
type: fileStream.type
})
if (navigator.msSaveBlob) { // 兼容IE
navigator.msSaveBlob(blob, saveFileName)
} else {
const url = window.URL.createObjectURL(blob)
saveAs(url, saveFileName)
}
resolve()
})
}
/**
*
* @param {*} url 下载地址
*/
export const downFile = (url) => {
const str1 = url.substr(0, 1)
let pathN = ''
if (str1 === '/') {
pathN = url
} else {
pathN = '/' + url
}
const strs = pathN.split('/')
let filename = '' // 下载文件名
for (let i = 0; i < strs.length; i++) {
if (i === strs.length - 1) {
filename = strs[i]
}
}
axios({
url,
method: 'get',
responseType: 'blob'
})
.then((res) => {
downloadFile(res.data, filename)
Message({
message: '下载成功',
type: 'success',
duration: 5 * 1000
})
})
.catch(err => {
// 这里可以统一处理错误，比如"未找到相关文件"，"下载失败"等
if (err.message === 'Request failed with status code 404') {
// 提示or弹框：未找到相关文件
Message({
// message: error.message,
message: '未找到相关文件',
type: 'error',
duration: 5 * 1000
})
} else {
// 提示or弹框：下载失败
Message({
// message: error.message,
message: '下载失败',
type: 'error',
duration: 5 * 1000
})
}
})
}