（详细）用js的生成a标签下载文件、并携带请求头

阅读本书更多章节>>>>

目录

下载方式的两种方式

方式一（直接下载）

方式二（设置请求头下载）

---

下载方式的两种方式

在我们开发当中会遇到下载文件的这种需求，但是这种里面还会细分为两种下载

1.直接下载、2.需要携带一定的权限信息才可以下载，例如携带token

方式一（直接下载）

  let a = document.createElement("a");//创建a标签      a.setAttribute("href", ConfigBaseURL + "/downSong?id=" + id);//设置文件下载地址      a.setAttribute('target', '_blank');//在当前页面创建下载      document.body.appendChild(a);//添加到body      a.click();//触发事件      document.body.removeChild(a);//移除标签

方式二（设置请求头下载）

在 JavaScript 中使用 <a> 标签下载文件时，直接通过 <a> 标签的点击事件触发下载，是无法设置请求头的，因为这是一个简单的 GET 请求。如果你需要设置请求头，通常会使用 XMLHttpRequest 或 Fetch API 进行更复杂的请求。

以下是使用 Fetch API 的例子，其中可以设置请求头：

// 创建一个点击事件触发下载function downloadFile() {  // 文件下载地址  const fileUrl = 'https://example.com/path/to/file';  // 设置请求头  const headers = new Headers();  headers.append('Authorization', 'Bearer YourAccessToken'); // 设置授权头，替换YourAccessToken为实际的访问令牌  // 发起 Fetch 请求  fetch(fileUrl, {    method: 'GET',    headers: headers,  })    .then(response => response.blob())    .then(blob => {      // 创建一个虚拟的链接元素，模拟点击下载      const link = document.createElement('a');      link.href = window.URL.createObjectURL(blob);      link.download = 'filename.ext'; // 设置下载文件名，替换filename.ext为实际的文件名和扩展名      document.body.appendChild(link);      // 模拟点击      link.click();      // 移除虚拟链接元素      document.body.removeChild(link);    })    .catch(error => console.error('下载失败：', error));}// 触发下载downloadFile();

扩展

问：js用创建a标签来直接下载是可行的。为什么还要将a标签添加进页面，直接下载不可以吗

答：在某些情况下，直接下载是可以的，但在其他情况下，为了确保兼容性和模拟用户点击的行为，将a标签添加到页面并触发点击事件是一种更可靠的方式。

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-10/156565.html，文章来源：网络cs，作者：胡椒，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！