[JavaScript] 如何使用JavaScript與blob下載檔案？

要下載PDF文件，我們可以使用fetch API來獲取文件的二進位數據，並將其轉換為Blob對象。然後，我們可以使用URL.createObjectURL()方法來生成一個URL，並將其分配給新建的超連結元素（a標籤）的href屬性。最後，我們可以使用download屬性來指定下載的文件名，並使用click()方法來觸發下載操作。

方法一:自動解析Http

以下是一份可以下載PDF文件的JavaScript代碼：

fetch('<PDF URL>')
  .then(response => response.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '<PDF filename>.pdf';
    a.click();
    window.URL.revokeObjectURL(url);
  });

需要注意的是，在上述代碼中的和需要替換為實際的PDF檔案的URL和下載的檔案名稱。

另外，由於使用了window.URL.createObjectURL()方法生成的URL會占用瀏覽器內存，因此，當用戶完成下載後，我們需要手動釋放這個URL以避免內存泄漏。我們可以在下載完成後，使用以下代碼來釋放URL：

window.URL.revokeObjectURL(url);

檔案類型顯式地傳遞給new Blob()建構子，然後創建一個 Blob 物件，而fetch API的response.blob()方法則是自動解析HTTP response中的Content-Type header，並根據其內容類型來創建對應的Blob物件。因此，兩種方式的效果是相同的，皆可用來下載PDF檔案。

方法二:new Blob()建構子，Blob 物件

以下是使用new Blob()方式的示例程式碼：

fetch('<PDF URL>')
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => {
    const blob = new Blob([arrayBuffer], { type: 'application/pdf' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '<PDF filename>.pdf';
    a.click();
    window.URL.revokeObjectURL(url);
  });

需要注意的是，在創建Blob物件時，需要使用arrayBuffer()方法來獲取檔案的二進位數據，並將其作為Blob物件的參數傳遞。同樣，下載完成後，需要手動釋放URL以避免內存泄漏。 以上就是如何使用JavaScript和fetch API來下載PDF文件的方法，希望對您有所幫助。