首頁 >web前端 >js教程 >如何跨瀏覽器從 JavaScript 中的二進位 Web 服務回應產生 PDF?

如何跨瀏覽器從 JavaScript 中的二進位 Web 服務回應產生 PDF?

Barbara Streisand
Barbara Streisand原創
2024-10-26 21:33:29470瀏覽

How to Generate a PDF from a Binary Web-Service Response in JavaScript Across Browsers?

使用JavaScript 從二進位Web 服務回應建置PDF

背景:

背景:

這個問題解決了從透過Ajax 請求檢索的二進位字串產生PDF 檔案的挑戰。提供的二進位流由 PDF 標頭和內容組成。雖然 data-uri 方法在某些瀏覽器中有效,但在 Internet Explorer 9 和 Firefox 中失敗。

問題:

問題在於尋找跨瀏覽器允許從二進位回應建立 PDF 檔案而不依賴編輯 Web 服務實現的解決方案。

解決方案:

要解決這個問題,以下方法是建議:

利用Blob 和下載屬性:

<code class="javascript">var request = new XMLHttpRequest();
request.open("GET", "/path/to/pdf", true); 
request.responseType = "blob";
request.onload = function (e) {
    if (this.status === 200) {
        // `blob` response
        console.log(this.response);
        // create `objectURL` of `this.response` : `.pdf` as `Blob`
        var file = window.URL.createObjectURL(this.response);
        var a = document.createElement("a");
        a.href = file;
        a.download = this.response.name || "detailPDF";
        document.body.appendChild(a);
        a.click();
        // remove `a` following `Save As` dialog, 
        // `window` regains `focus`
        window.onfocus = function () {                     
          document.body.removeChild(a)
        }
    };
};
request.send();</code>
透過將XMLHttpRequest 物件的responseType 設定為“blob”,回應將作為Blob 物件接收。該 Blob 代表 PDF 文件。隨後,您可以使用 createObjectURL 方法建立下載鏈接,以允許使用者下載 PDF。

為了示範此解決方案,可以使用以下程式碼片段:

優點:
  • 此方法有以下優點:
  • 相容於所有主流瀏覽器,包括IE9、Firefox、Opera、Chrome 和Safari
避免了某些瀏覽器中data-uri 方法遇到的缺陷允許使用者方便下載PDF 檔案

以上是如何跨瀏覽器從 JavaScript 中的二進位 Web 服務回應產生 PDF?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn