用js生成a標簽下載文件并攜帶請求頭的兩種方法

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

這篇文章主要給大家介紹了關于用js生成a標簽下載文件并攜帶請求頭的兩種方法, 這種下載文件方式在前端項目中非常常見,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

下載方式的兩種方式

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

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

方式一（直接下載）

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

方式二（設置請求頭下載）

在 JavaScript 中使用 <a> 標簽下載文件時，直接通過 <a> 標簽的點擊事件觸發(fā)下載，是無法設置請求頭的，因為這是一個簡單的 GET 請求。如果你需要設置請求頭，通常會使用 XMLHttpRequest 或 Fetch API 進行更復雜的請求。

以下是使用 Fetch API 的例子，其中可以設置請求頭：

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

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

  // 發(fā)起 Fetch 請求
  fetch(fileUrl, {
    method: 'GET',
    headers: headers,
  })
    .then(response => response.blob())
    .then(blob => {
      // 創(chuàng)建一個虛擬的鏈接元素，模擬點擊下載
      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));
}

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