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。
