快捷導(dǎo)航

用js生成a標(biāo)簽下載文件并攜帶請(qǐng)求頭的兩種方法

更新時(shí)間：2024年03月27日 10:13:51 作者：_攬

這篇文章主要給大家介紹了關(guān)于用js生成a標(biāo)簽下載文件并攜帶請(qǐng)求頭的兩種方法, 這種下載文件方式在前端項(xiàng)目中非常常見(jiàn),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

下載方式的兩種方式

在我們開(kāi)發(fā)當(dāng)中會(huì)遇到下載文件的這種需求，但是這種里面還會(huì)細(xì)分為兩種下載

1.直接下載、2.需要攜帶一定的權(quán)限信息才可以下載，例如攜帶token

方式一（直接下載）

	  let a = document.createElement("a");//創(chuàng)建a標(biāo)簽
      a.setAttribute("href", ConfigBaseURL + "/downSong?id=" + id);//設(shè)置文件下載地址
      a.setAttribute('target', '_blank');//在當(dāng)前頁(yè)面創(chuàng)建下載
      document.body.appendChild(a);//添加到body
      a.click();//觸發(fā)事件
      document.body.removeChild(a);//移除標(biāo)簽

方式二（設(shè)置請(qǐng)求頭下載）

在 JavaScript 中使用 <a> 標(biāo)簽下載文件時(shí)，直接通過(guò) <a> 標(biāo)簽的點(diǎn)擊事件觸發(fā)下載，是無(wú)法設(shè)置請(qǐng)求頭的，因?yàn)檫@是一個(gè)簡(jiǎn)單的 GET 請(qǐng)求。如果你需要設(shè)置請(qǐng)求頭，通常會(huì)使用 XMLHttpRequest 或 Fetch API 進(jìn)行更復(fù)雜的請(qǐng)求。

以下是使用 Fetch API 的例子，其中可以設(shè)置請(qǐng)求頭：

// 創(chuàng)建一個(gè)點(diǎn)擊事件觸發(fā)下載
function downloadFile() {
  // 文件下載地址
  const fileUrl = 'https://example.com/path/to/file';

  // 設(shè)置請(qǐng)求頭
  const headers = new Headers();
  headers.append('Authorization', 'Bearer YourAccessToken'); // 設(shè)置授權(quán)頭，替換YourAccessToken為實(shí)際的訪問(wèn)令牌

  // 發(fā)起 Fetch 請(qǐng)求
  fetch(fileUrl, {
    method: 'GET',
    headers: headers,
  })
    .then(response => response.blob())
    .then(blob => {
      // 創(chuàng)建一個(gè)虛擬的鏈接元素，模擬點(diǎn)擊下載
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = 'filename.ext'; // 設(shè)置下載文件名，替換filename.ext為實(shí)際的文件名和擴(kuò)展名
      document.body.appendChild(link);

      // 模擬點(diǎn)擊
      link.click();

      // 移除虛擬鏈接元素
      document.body.removeChild(link);
    })
    .catch(error => console.error('下載失敗：', error));
}

// 觸發(fā)下載
downloadFile();