如何使用 JavaScript 從不同瀏覽器的 Web 服務回應中可靠地下載 PDF 檔案？

從JavaScript 中的Web 服務回應建構PDF 文件

從Web 服務傳回的二進位字串建立PDF 文件提出了跨位字串瀏覽器的挑戰。 data-uri 方法雖然在 Chrome 和 Opera 等某些瀏覽器中有效，但在 IE9 和 Firefox 中效果不佳。

替代方法：客戶端檔案下載

至為了克服這些限制，另一種方法是在檔案系統上建立 PDF 檔案以供使用者下載。要實現此目的，請考慮以下操作：

將回應類型設為Blob

將XMLHttpRequest 物件的responseType 屬性配置為「blob」而不是「text」 。這允許客戶端以 Blob 物件的形式接收 PDF 資料。

利用Blob 物件

使用從Web 服務請求獲得的回應建立一個新的Blob 物件.

產生URL

為表示PDF 檔案的Blob 物件產生物件URL。

建立下載連結

建立 HTML 元素並設定其 href 和下載屬性。 href 屬性應指向物件 URL，而 download 屬性指定檔案名稱。

觸發下載

將 元素附加到文件正文並點擊它以啟動文件下載。

範例程式碼

以下JavaScript 程式碼示範了此方法：

<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) {
        // Generate .pdf name as `Blob` from `this.response`
        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` after `Save As` dialog
        window.onfocus = function () {
            document.body.removeChild(a);
        };
    };
};
request.send();</code>

此方法確保跨多個瀏覽器（包括IE9、Firefox 、Chrome、Opera 和Safari）可靠的檔案下載。

以上是如何使用 JavaScript 從不同瀏覽器的 Web 服務回應中可靠地下載 PDF 檔案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！