首頁  >  問答  >  主體

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

<p>我的網站的程式碼儲存在一個非常麻煩、糟糕的後端。不幸的是,他們將內容頭鎖定得非常嚴格,任何以<strong>.pdf</strong>結尾的文件鏈接都只能通過UI下載提示來訪問,他們不允許在瀏覽器中<strong>查看</strong>PDF文件。 我現在的想法是,也許我可以將文件上傳到伺服器,並將其重命名為file.pdf.png(這似乎可以透過滿足伺服器內容頭條件,使其看起來像是.png檔案類型,從而允許瀏覽器將檔案下載到<strong>記憶體</strong>中)。然後,我希望透過將檔案設定為可下載(<strong>在記憶體中</strong>),可以在JavaScript中建立一個新檔案。其他地方提出的一種方法是,將損壞的.png文件的內容進行base64編碼,然後根據解碼後的base64內容在JavaScript中創建一個新文件,並給它<strong>.pdf</strong>擴展名,希望它能夠<strong>A</strong>作為PDF文件工作,並且<strong>B</strong>在內存中存儲,這樣用戶就不必下載任何東西到他們的設備上。最終目標是在記憶體中檢索文件(從使用者的後台)並使用瀏覽器的內建PDF檢視器進行顯示。 </p> <p>//伺服器有上傳檔案的選項 //假設您上傳的實際上是一個PDF文件,但在末尾附加了.png副檔名, //所以連結到這些檔案的連結看起來像是https://the-website.com/file.pdf.png</p> <p>//現在我需要能夠在後台檢索此文件,希望它在內存中,這樣用戶就不必與UI下載彈出框進行交互。 </p> <p>//然後,透過某種方式,我需要提取文件內容(file.pdf.png),並建立一個基於具有偽文件副檔名的文件的有效PDF文件,結果文件應該是file.pdf。這個文件需要儲存在記憶體中,這樣我就可以在網頁中使用像是<embed />或<object>或任何最適合在各種瀏覽器中查看PDF的方式來查看它,但我不能強迫用戶進入UI彈出框或下載到他們的裝置上(我只想在記憶體中工作)。 <p><br /></p></object></p>
P粉976737101P粉976737101451 天前521

全部回覆(1)我來回復

  • P粉071743732

    P粉0717437322023-08-17 12:50:47

    檔案副檔名其實與此並沒有太多關係... 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。

    回覆
    0
  • 取消回覆