让你下载文件不在困难！vue下载文件多种方法集锦

2023-12-07 16:46:30

Vue.js 中的文件下载：5 种方法详解

作为一名资深的 Vue.js 开发者，掌握文件下载技巧至关重要。本文将深入探讨 5 种在 Vue.js 中实现文件下载的不同方法，每种方法都配有详尽的说明和示例代码，助力你轻松驾驭文件下载。

1. 使用 axios 库

优点： 简单易用，兼容性强

缺点： 需要安装外部库

axios 是 Vue.js 中一个广受欢迎的 HTTP 请求库，提供了直观易用的 API，让你轻松进行文件下载。

import axios from 'axios';

axios({
  url: '/download/file.txt',
  method: 'GET',
  responseType: 'blob', // 指定服务器返回的数据类型
}).then((response) => {
  const blob = new Blob([response.data]);
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'file.txt';
  a.click();
  window.URL.revokeObjectURL(url);
});

2. 使用 fetch API

优点： 原生 API，性能优异

缺点： 兼容性略差，需要手动处理二进制数据

fetch API 是 HTML5 中引入的原生 API，提供更简洁高效的 HTTP 请求功能。

fetch('/download/file.txt')
  .then((response) => {
    if (!response.ok) {
      throw new Error('文件下载错误');
    }
    return response.blob();
  })
  .then((blob) => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'file.txt';
    a.click();
    window.URL.revokeObjectURL(url);
  })
  .catch((error) => {
    console.error(error);
  });

3. 使用第三方库

优点： 功能强大，易于使用

缺点： 需要安装外部库，可能增加代码体积

除了 axios 库和 fetch API，还有一些第三方库可以助力文件下载，例如：

vue-file-download： 一个简洁实用的 Vue.js 文件下载组件
vue-http-download： 支持断点续传的文件下载组件
js-file-download： 一个适用于多种文件格式和浏览器的文件下载库

4. 使用 HTML5 下载属性

优点： 简单易行，无需额外代码

缺点： 兼容性受限，仅适用于文本文件下载

HTML5 提供了 <a> 标签的 download 属性，允许你指定下载文件的名称。

<a href="/download/file.txt" download="file.txt">下载文件</a>

5. 使用服务端渲染

优点： 性能出色，可生成任意类型文件

缺点： 需要服务端支持

如果你采用服务端渲染 (SSR)，可以在服务器端直接生成文件并返回给客户端。

// 服务器端代码
const fs = require('fs');

app.get('/download/file.txt', (req, res) => {
  const file = fs.readFileSync('file.txt');
  res.setHeader('Content-Disposition', `attachment; filename="file.txt"`);
  res.send(file);
});

// 客户端代码
axios.get('/download/file.txt')
  .then((response) => {
    const blob = new Blob([response.data]);
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'file.txt';
    a.click();
    window.URL.revokeObjectURL(url);
  });