Vue 前端文件导出实战:file-saver 插件用法详解
在前端开发中,我们经常需要将生成的数据(如 Excel、图片、文本)直接下载到用户本地。虽然服务端返回文件流是常见做法,但在纯前端生成内容的场景下,file-saver 是一个非常实用的解决方案。
安装依赖
通过 npm 安装插件及其 TypeScript 类型定义:
npm install file-saver --save
# 若使用 TypeScript,建议同时安装类型定义
npm install @types/file-saver --save-dev
注意:如果文件体积非常大,超过了浏览器的内存限制,或者需要支持进度条、取消操作等高级功能,建议优先考虑服务端流式传输。
file-saver更适合在客户端生成小至中等体积的文件。
引入模块
在 Vue 组件中按需引入 saveAs 方法:
import { saveAs } from 'file-saver'
保存 Blob 对象
这是最常用的场景,通常用于后台返回的二进制流或前端生成的二进制数据。
const blob = new Blob([fileStream], { type: 'application/octet-stream' })
saveAs(blob, 'filename.xlsx') // fileName 需包含后缀名
保存文本文件
如果需要导出纯文本内容,只需构造一个包含文本的 Blob 即可:
var blob = new Blob(['Hello, world!'], { type: 'text/plain;charset=utf-8' })
saveAs(blob, 'hello world.txt')
保存远程 URL
直接传入 URL 地址也可以触发下载,但需要注意跨域问题。
saveAs('https://example.com/image.png', 'image.jpg')
在同源环境下,浏览器会直接下载;跨域时,它会先检查 CORS 标头是否允许同步请求。如果支持,则下载数据并转换为 Blob 保存;如果不支持,则无法完成下载。此时可能需要后端配合设置 Access-Control-Allow-Origin。
保存 Canvas 画布
对于图表或绘图工具导出的图片,可以利用 Canvas 的 方法结合插件实现:

