使用JavaScript下載伺服器上的.png檔案並建立一個帶有不同檔案副檔名（.pdf）的新文件

Question

我的網站的程式碼儲存在一個非常麻煩、糟糕的後端。不幸的是，他們將內容頭鎖定得非常嚴格，任何以.pdf結尾的文件鏈接都只能通過UI下載提示來訪問，他們不允許在瀏覽器中查看PDF文件。 我現在的想法是，也許我可以將文件上傳到伺服器，並將其重命名為file.pdf.png（這似乎可以透過滿足伺服器內容頭條件，使其看起來像是.png檔案類型，從而允許瀏覽器將檔案下載到記憶體中）。然後，我希望透過將檔案設定為可下載（在記憶體中），可以在JavaScript中建立一個新檔案。其他地方提出的一種方法是，將損壞的.png文件的內容進行base64編碼，然後根據解碼後的base64內容在JavaScript中創建一個新文件，並給它.pdf擴展名，希望它能夠A作為PDF文件工作，並且B在內存中存儲，這樣用戶就不必下載任何東西到他們的設備上。最終目標是在記憶體中檢索文件（從使用者的後台）並使用瀏覽器的內建PDF檢視器進行顯示。

//伺服器有上傳檔案的選項 //假設您上傳的實際上是一個PDF文件，但在末尾附加了.png副檔名， //所以連結到這些檔案的連結看起來像是https://the-website.com/file.pdf.png

//現在我需要能夠在後台檢索此文件，希望它在內存中，這樣用戶就不必與UI下載彈出框進行交互。

//然後，透過某種方式，我需要提取文件內容（file.pdf.png），並建立一個基於具有偽文件副檔名的文件的有效PDF文件，結果文件應該是file.pdf。這個文件需要儲存在記憶體中，這樣我就可以在網頁中使用像是或

Answer 1

檔案副檔名其實與此並沒有太多關係... Content-Type 頭才有關係。

根據您的描述，我猜測當獲取PDF文件時，伺服器在回應中沒有使用正確的類型，而是發送它們作為application/octet-stream或其他類型。 （這是一種通用類型，瀏覽器預設會下載它們。）

有幾種方法可以解決這個問題。一種方法是使用ServiceWorker來根據需要重寫Content-Type頭部。不過，這並不總是有效的。當頁面被強制重新載入或啟用隱私權模式時，瀏覽器經常會停用Service Worker。

另一種更接近您提議的方法是在JavaScript中以記憶體方式取得PDF。您可以使用Fetch API來實現這一點，然後建立一個Blob URL，並讓瀏覽器下載它。尚未經過測試，但大致如下：

const res = await fetch('https://example.com/doc.pdf.fake-ext');
if (!res.ok) {
  throw new Error(`${res.status} ${res.statusText}`);
}

const blob = await res.blob();
const blobUrl = URL.createObjectURL(blob);

// 现在，您可以直接链接或重定向到`blobUrl`。
// 完成后一定要释放它，使用URL.revokeObjectURL()。

請注意，這對於特別大的文件可能不起作用。小型文檔則沒有問題。

也要注意，並非所有瀏覽器都能顯示PDF，也並非所有系統都配置允許瀏覽器自行顯示PDF。