Vue中下载文件的几种方法_标签_得到文件后创建一个 Blob 对象
Vue中下载文件的几种方法
方法一：使用 a 标签和 download 属性
这个方法超级简单，就像你小时候玩的游戏一样直接。只要你知道文件的网址，就可以这样做：
- 创建一个
a标签。 - 给这个标签加上一个
download属性。 - 把文件的网址填到
href属性里。 - 让这个标签“跳一下”，也就是触发它的点击事件。
方法二：通过 axios 发起请求并创建 Blob 对象
如果你需要从服务器获取文件，这个方法就派上用场了：
- 用 axios 发个 GET 请求，记得设置
responseType为'blob'。 - 得到文件后，创建一个 Blob 对象。
- 把这个 Blob 对象的 URL 赋值给
a标签的href。 - 再让
a标签跳一下。
方法三：使用第三方库如 FileSaver.js
如果你的下载逻辑很复杂，就需要请第三方库帮忙了，比如 FileSaver.js：
- 先安装 FileSaver.js，这个步骤很重要。
- 然后，用 FileSaver.js 把 Blob 对象保存到本地。
方法对比
| 方法 | 优点 | 缺点 |
|---|---|---|
| 使用 a 标签和 download 属性 | 实现简单，适用于前端已知文件 URL 的情况 | 受限于浏览器支持，无法处理复杂的文件下载逻辑 |
| 通过 axios 发起请求并创建 Blob 对象 | 适用于需要通过 API 请求获取文件的场景 | 实现相对复杂，需要处理 Blob 对象 |
| 使用 FileSaver.js | 处理复杂文件下载逻辑时更加方便 | 需要引入第三方库，增加项目依赖 |
总结和建议
在 Vue 中下载文件有几种方法，具体用哪种要看你的需求。简单直接的就用 a 标签，需要 API 的话用 axios，复杂的话就用 FileSaver.js。每种方法都有它的好处和局限性，你根据自己的情况来选吧！