Vue携带请求头，使用a标签下载文件，一次解决！

2023-12-20 19:19:50

下载文件，不慌不忙！

作为一名开发人员，你可能经常需要在应用程序中提供文件下载功能。虽然这看起来像是一个简单的任务，但如果没有适当的处理，它可能会成为一个令人头疼的问题。

在本文中，我们将探讨在 Vue.js 中使用带有请求头的 a 标签下载文件。通过使用这种方法，你可以控制文件下载的各个方面，包括文件名、内容类型以及其他重要的元数据。

步骤指南

要使用 a 标签下载文件，你需要遵循以下步骤：

创建 a 标签：

<a id="download-link" href="#">下载文件</a>

设置 href 属性：

document.getElementById('download-link').href = '/path/to/file.txt';

设置 download 属性：

document.getElementById('download-link').download = 'file.txt';

设置请求头：

const requestHeaders = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'
};

使用 AJAX 请求发送请求：

const request = new XMLHttpRequest();
request.open('GET', '/path/to/file.txt', true);
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Authorization', 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c');
request.responseType = 'blob';
request.onload = function() {
  const blob = new Blob([this.response], { type: 'application/octet-stream' });
  const url = window.URL.createObjectURL(blob);
  document.getElementById('download-link').href = url;
};
request.send();