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'

这是最常用的场景，通常用于后台返回的二进制流或前端生成的二进制数据。

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 地址也可以触发下载，但需要注意跨域问题。

saveAs('https://example.com/image.png', 'image.jpg')

在同源环境下，浏览器会直接下载；跨域时，它会先检查 CORS 标头是否允许同步请求。如果支持，则下载数据并转换为 Blob 保存；如果不支持，则无法完成下载。此时可能需要后端配合设置 Access-Control-Allow-Origin。

对于图表或绘图工具导出的图片，可以利用 Canvas 的方法结合插件实现：

更多推荐文章