当前位置：首页 > news >正文

vue中，使用file-saver导出文件，下载Excel文件、下载图片、下载文本

news 来源：原创 2024/5/10 15:56:11

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

下载服务器文件（服务器返回文件流）

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) { // 兼容IEnavigator.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})}})
}