首页 前端知识 (详细)用js的生成a标签下载文件、并携带请求头

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

2024-05-14 23:05:23 前端知识 前端哥 16 955 我要收藏

目录

下载方式的两种方式

方式一(直接下载)

方式二(设置请求头下载)


下载方式的两种方式

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

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.qianduange.cn//article/8666.html
标签
评论
发布的文章

video 自定义视频播放控件

2024-05-26 01:05:25

HTML5 画布绘制海报

2024-05-26 01:05:13

HTML5学习(三)

2024-05-26 01:05:43

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!