使用 a 標(biāo)簽的 download 屬性：

function downloadFile(url, fileName) {
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  link.target = "_blank"; // 可選，如果希望在新窗口中下載文件，請(qǐng)取消注釋此行
  link.click();
}

使用這個(gè)函數(shù)，你可以傳入文件的 URL 和文件名作為參數(shù)。然后，創(chuàng)建一個(gè) <a> 元素，將 URL 賦值給 href 屬性，將文件名賦值給 download 屬性，最后觸發(fā)點(diǎn)擊鏈接進(jìn)行文件下載。

使用 fetch API 和 Blob 對(duì)象：

function downloadFile(url, fileName) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = fileName;
      link.target = "_blank"; // 可選，如果希望在新窗口中下載文件，請(qǐng)取消注釋此行
      link.click();
    });
}

這個(gè)函數(shù)會(huì)使用 fetch API 獲取文件的二進(jìn)制數(shù)據(jù)，并將其封裝為 Blob 對(duì)象。然后，創(chuàng)建一個(gè)臨時(shí)鏈接，將 Blob 對(duì)象的 URL 賦值給鏈接的 href 屬性，并設(shè)置 download 屬性為文件名，最后觸發(fā)點(diǎn)擊鏈接進(jìn)行下載。

使用 XMLHttpRequest 對(duì)象：

function downloadFile(url, fileName) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    const blob = xhr.response;
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.target = "_blank"; // 可選，如果希望在新窗口中下載文件，請(qǐng)取消注釋此行
    link.click();
  };
  xhr.send();
}

這個(gè)函數(shù)使用 XMLHttpRequest 對(duì)象發(fā)送一個(gè) GET 請(qǐng)求來(lái)獲取文件的二進(jìn)制數(shù)據(jù)，并在請(qǐng)求完成后創(chuàng)建一個(gè)臨時(shí)鏈接來(lái)進(jìn)行下載。

使用這些方法之一，你可以在 JavaScript 中實(shí)現(xiàn)文件下載功能。只需調(diào)用相應(yīng)的下載函數(shù)，并傳入文件的 URL 和文件名，即可下載文件。請(qǐng)注意，為了確保兼容性，建議將下載操作放在用戶交互的上下文中，例如在點(diǎn)擊按鈕或鏈接時(shí)觸發(fā)下載操作。這樣可以避免瀏覽器對(duì)自動(dòng)下載行為的限制。

使用 window.location.href:

function downloadFile(url) {
  window.location.href = url;
}

這種方法簡(jiǎn)單直接，使用 window.location.href 將瀏覽器重定向到文件的 URL，觸發(fā)文件下載。但是，這種方法沒(méi)有提供指定文件名的選項(xiàng)。

使用 download.js 庫(kù):

download.js 是一個(gè)輕量級(jí)的 JavaScript 庫(kù)，簡(jiǎn)化了文件下載的過(guò)程。你可以通過(guò)以下步驟使用它：

引入 download.js 庫(kù)：

<script src="https://cdnjs.cloudflare.com/ajax/libs/downloadjs/1.4.8/download.min.js"></script>

使用 download() 函數(shù)進(jìn)行文件下載：

function downloadFile(url, fileName) {
  download(url, fileName);
}

這個(gè)函數(shù)使用 download.js 提供的 download() 函數(shù)來(lái)實(shí)現(xiàn)文件下載。你可以傳入文件的 URL 和文件名作為參數(shù)。

使用后端 API 下載文件：

如果文件需要經(jīng)過(guò)處理或需要進(jìn)行身份驗(yàn)證，你可以通過(guò)調(diào)用后端的 API 來(lái)實(shí)現(xiàn)文件下載。在后端，可以根據(jù)請(qǐng)求參數(shù)生成文件，并將其作為響應(yīng)的一部分返回給前端。前端可以通過(guò) AJAX 請(qǐng)求或使用其他適當(dāng)?shù)姆椒▉?lái)調(diào)用后端 API 并下載文件。

請(qǐng)注意，對(duì)于跨域的文件下載，可能需要在服務(wù)器端進(jìn)行相應(yīng)的配置以允許跨域下載。此外，某些瀏覽器對(duì)自動(dòng)下載行為進(jìn)行了限制，因此最好將下載操作放在用戶交互的上下文中。

使用 HTML5 的 download 屬性：

HTML5 的 a 標(biāo)簽提供了一個(gè) download 屬性，可以直接指定文件名，從而實(shí)現(xiàn)文件下載。這種方法不需要 JavaScript 干預(yù)，只需在 a 標(biāo)簽中設(shè)置 href 和 download 屬性即可：

<a href="path/to/file.pdf" rel="external nofollow"  download="myfile.pdf">Download</a>

用戶點(diǎn)擊這個(gè)鏈接時(shí)，瀏覽器會(huì)自動(dòng)下載文件，并使用指定的文件名。

使用 JavaScript 實(shí)現(xiàn)流式下載：

對(duì)于大型文件或需要?jiǎng)討B(tài)生成的文件，可以使用 JavaScript 來(lái)實(shí)現(xiàn)流式下載。這種方法涉及將文件內(nèi)容分塊發(fā)送到客戶端，并通過(guò) JavaScript 逐塊接收和保存文件內(nèi)容。以下是一個(gè)簡(jiǎn)單的示例：

function downloadFile(url) {
  fetch(url)
    .then(response => {
      const reader = response.body.getReader();
      const stream = new ReadableStream({
        start(controller) {
          function push() {
            reader.read().then(({ done, value }) => {
              if (done) {
                controller.close();
                return;
              }
              controller.enqueue(value);
              push();
            });
          }
          push();
        }
      });
      const blob = new Blob([stream], { type: response.headers.get('Content-Type') });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = 'myfile.pdf';
      link.target = "_blank"; // 可選，如果希望在新窗口中下載文件，請(qǐng)取消注釋此行
      link.click();
    });
}

這個(gè)函數(shù)使用 fetch API 獲取文件的內(nèi)容，并通過(guò)流式方式逐塊傳輸文件內(nèi)容，以避免一次性加載整個(gè)文件。然后，創(chuàng)建一個(gè)包含文件內(nèi)容的 Blob 對(duì)象，并使用臨時(shí)鏈接進(jìn)行下載。

使用 FileSaver.js 庫(kù)：

FileSaver.js 是一個(gè)流行的 JavaScript 庫(kù)，用于在客戶端保存文件。它提供了簡(jiǎn)單的 API 來(lái)保存 Blob 或 File 對(duì)象。你可以通過(guò)以下步驟使用它：

引入 FileSaver.js 庫(kù)：

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

使用 saveAs() 函數(shù)進(jìn)行文件下載：

function downloadFile(url, fileName) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      saveAs(blob, fileName);
    });
}

這個(gè)函數(shù)使用 FileSaver.js 提供的 saveAs() 函數(shù)來(lái)實(shí)現(xiàn)文件下載。它首先使用 fetch API 獲取文件的二進(jìn)制數(shù)據(jù)，并將其封裝為 Blob 對(duì)象，然后調(diào)用 saveAs() 函數(shù)來(lái)觸發(fā)文件下載。

使用 iframe 進(jìn)行隱藏下載：

有時(shí)，你可能希望在不打開(kāi)新窗口或更改當(dāng)前頁(yè)面的情況下下載文件。你可以創(chuàng)建一個(gè)隱藏的 iframe 元素，并將要下載的文件的 URL 設(shè)置為 iframe 的 src 屬性。這樣，文件將在后臺(tái)下載。

function downloadFile(url) {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = url;
  document.body.appendChild(iframe);
}

這個(gè)函數(shù)創(chuàng)建一個(gè)隱藏的 iframe 元素，并將 URL 分配給它。這將觸發(fā)文件下載，而不會(huì)對(duì)用戶界面產(chǎn)生任何可見(jiàn)變化。

使用 WebSocket 或 Server-Sent Events：

如果你需要實(shí)時(shí)下載數(shù)據(jù)，或者需要根據(jù)特定事件來(lái)觸發(fā)文件下載，可以考慮使用 WebSocket 或 Server-Sent Events (SSE)。通過(guò)與服務(wù)器建立長(zhǎng)連接，你可以在特定條件滿足時(shí)從服務(wù)器端接收文件數(shù)據(jù)，并在客戶端進(jìn)行文件下載。

使用服務(wù)端重定向：

在某些情況下，文件下載可能需要經(jīng)過(guò)特定的處理或驗(yàn)證。你可以通過(guò)在服務(wù)器端生成文件，并將用戶重定向到該文件的 URL 來(lái)實(shí)現(xiàn)文件下載。這種方法需要在服務(wù)器端進(jìn)行相應(yīng)的處理并設(shè)置適當(dāng)?shù)捻憫?yīng)頭，以確保文件以附件形式下載。

使用 Blob URL：

Blob URL 是一個(gè)特殊的 URL，代表一個(gè) Blob 對(duì)象。你可以將文件數(shù)據(jù)封裝為 Blob 對(duì)象，并使用 createObjectURL() 方法創(chuàng)建 Blob URL。然后，將 Blob URL 分配給下載鏈接的 href 屬性，從而實(shí)現(xiàn)文件下載。

function downloadFile(data, fileName) {
  const blob = new Blob([data]);
  const url = URL.createObjectURL(blob);
  
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  link.target = "_blank"; // 可選，如果希望在新窗口中下載文件，請(qǐng)取消注釋此行
  link.click();
  
  URL.revokeObjectURL(url);
}

這個(gè)函數(shù)接受文件數(shù)據(jù)和文件名作為參數(shù)，并通過(guò) Blob URL 實(shí)現(xiàn)文件下載。首先，將文件數(shù)據(jù)封裝為 Blob 對(duì)象，然后使用 createObjectURL() 方法創(chuàng)建 Blob URL。接下來(lái)，創(chuàng)建一個(gè)下載鏈接，將 Blob URL 分配給鏈接的 href 屬性，設(shè)置文件名以及其他選項(xiàng)，最后觸發(fā)點(diǎn)擊鏈接進(jìn)行下載。最后，使用 revokeObjectURL() 方法釋放 Blob URL 的資源。

使用 WebRTC 數(shù)據(jù)通道：

如果你的應(yīng)用程序基于 WebRTC 技術(shù)，你可以使用數(shù)據(jù)通道實(shí)現(xiàn)文件傳輸和下載。WebRTC 數(shù)據(jù)通道提供了點(diǎn)對(duì)點(diǎn)的實(shí)時(shí)數(shù)據(jù)傳輸能力，可以用于將文件數(shù)據(jù)從發(fā)送方傳輸?shù)浇邮辗?。你可以將文件?shù)據(jù)切分為數(shù)據(jù)包，并通過(guò)數(shù)據(jù)通道逐個(gè)發(fā)送。接收方可以將數(shù)據(jù)包重新組裝為文件，并進(jìn)行下載。

使用 WebRTC 數(shù)據(jù)通道進(jìn)行文件傳輸和下載涉及兩個(gè)角色：發(fā)送方和接收方。以下是使用 WebRTC 數(shù)據(jù)通道實(shí)現(xiàn)文件下載的基本步驟：

• 發(fā)送方：

• 創(chuàng)建一個(gè) WebRTC 連接，并通過(guò)信令服務(wù)器與接收方建立連接。

• 在連接建立后，創(chuàng)建一個(gè)數(shù)據(jù)通道，并通過(guò)該通道發(fā)送文件數(shù)據(jù)。

• 將文件數(shù)據(jù)分割成較小的數(shù)據(jù)包，并通過(guò)數(shù)據(jù)通道逐個(gè)發(fā)送。

• 一旦所有數(shù)據(jù)包都發(fā)送完成，關(guān)閉數(shù)據(jù)通道和 WebRTC 連接。

• 接收方：

• 創(chuàng)建一個(gè) WebRTC 連接，并通過(guò)信令服務(wù)器與發(fā)送方建立連接。
• 在連接建立后，監(jiān)聽(tīng)連接上的數(shù)據(jù)通道事件。
• 當(dāng)接收到數(shù)據(jù)通道的數(shù)據(jù)包時(shí)，將其保存到緩沖區(qū)中。
• 當(dāng)接收到所有數(shù)據(jù)包后，將緩沖區(qū)中的數(shù)據(jù)組裝為文件，并進(jìn)行下載。
• 關(guān)閉數(shù)據(jù)通道和 WebRTC 連接。

以下是一個(gè)簡(jiǎn)單的示例代碼，展示了如何使用 WebRTC 數(shù)據(jù)通道實(shí)現(xiàn)文件下載：

// 創(chuàng)建 WebRTC 連接和數(shù)據(jù)通道
const pc = new RTCPeerConnection();
const channel = pc.createDataChannel('fileTransfer');

// 監(jiān)聽(tīng)數(shù)據(jù)通道的開(kāi)啟事件
channel.onopen = () => {
  console.log('Data channel opened');
  
  // 讀取文件并發(fā)送數(shù)據(jù)
  readFileAndSendData();
};

// 讀取文件并發(fā)送數(shù)據(jù)
function readFileAndSendData() {
  // 讀取文件數(shù)據(jù)（假設(shè)文件數(shù)據(jù)已經(jīng)準(zhǔn)備好）
  const fileData = getFileData();
  
  // 將文件數(shù)據(jù)分割成數(shù)據(jù)包
  const chunkSize = 16384; // 每個(gè)數(shù)據(jù)包的大小
  const totalChunks = Math.ceil(fileData.byteLength / chunkSize);
  
  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, fileData.byteLength);
    const chunk = fileData.slice(start, end);
    
    // 發(fā)送數(shù)據(jù)包
    channel.send(chunk);
  }
  
  // 發(fā)送完成后關(guān)閉數(shù)據(jù)通道和連接
  channel.close();
  pc.close();
}

// 發(fā)起 WebRTC 連接并與接收方建立連接
// 這里省略了與信令服務(wù)器的交互步驟

接收方代碼：

// 創(chuàng)建 WebRTC 連接
const pc = new RTCPeerConnection();

// 監(jiān)聽(tīng)連接上的數(shù)據(jù)通道事件
pc.ondatachannel = event => {
  const channel = event.channel;
  
  channel.onmessage = event => {
    // 接收到數(shù)據(jù)包，保存到緩沖區(qū)
    const chunk = event.data;
    saveChunk(chunk);
  };
  
  channel.onclose = () => {
    console.log('Data channel closed');
    
    // 所有數(shù)據(jù)包接收完成后，組裝文件并進(jìn)行下載
    const fileData = assembleFileFromChunks();
    downloadFile(fileData);
  };
};

// 創(chuàng)建 WebRTC 連接并與發(fā)送方建立連接
// 這里省略了與信令服務(wù)器的交互步驟

總結(jié) 

到此這篇關(guān)于JavaScript實(shí)現(xiàn)文件下載的14種方法的文章就介紹到這了,更多相關(guān)JS文件下載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論