Vue文件下载的五种方式

2023-06-02 20:51:22

Vue项目中的文件下载五种常用方式

在Vue项目中，文件下载是一个常见的需求。本文将介绍五种最常用的文件下载方法，帮助您轻松应对各种文件下载场景。

1. 使用JavaScript原生方法下载文件

这是最简单直接的方法，只需使用JavaScript的window.location.href属性指定要下载的文件地址即可。

window.location.href = 'https://example.com/file.txt';

这种方法简单易用，但无法指定文件类型，可能导致浏览器错误。

2. 使用请求头的方式下载文件

这种方法可以在请求头中指定要下载的文件类型，服务器会根据请求头自动将文件发送给客户端。

const request = new Request('https://example.com/file.txt', {
  headers: {
    'Accept': 'application/octet-stream'
  }
});

fetch(request).then(response => {
  response.blob().then(blob => {
    // 使用blob对象进行文件下载
  });
});

这种方法可以指定文件类型，但需要服务器端支持。

3. 使用服务端的方式下载文件

这种方法需要在服务端提供一个文件下载接口，客户端通过调用该接口来下载文件。

const url = 'https://example.com/api/download';

fetch(url).then(response => {
  response.blob().then(blob => {
    // 使用blob对象进行文件下载
  });
});

这种方法需要服务端支持，但可以提供更多的灵活性，例如权限控制和进度跟踪。

4. 使用链接的方式下载文件

这种方法是最直观的，只需要创建一个指向文件的链接，然后点击链接即可下载文件。

<a href="https://example.com/file.txt" download>下载文件</a>

这种方法简单易用，但需要用户手动点击链接，无法控制下载进度。

5. 使用Blob和ReadableStream的方式下载文件

这种方法需要使用Blob和ReadableStream来创建一个可下载的文件对象。

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
const reader = new ReadableStream({
  start(controller) {
    controller.enqueue(blob);
    controller.close();
  }
});

const url = URL.createObjectURL(reader);

const a = document.createElement('a');
a.href = url;
a.download = 'file.txt';
a.click();

URL.revokeObjectURL(url);