JavaScript を使用して、さまざまなブラウザー間で Web サービスの応答から PDF ファイルを確実にダウンロードするにはどうすればよいですか?

JavaScript で Web サービスの応答から PDF ドキュメントを構築する

Web サービスから返されたバイナリ文字列から PDF ドキュメントを構築するには、クロスブラウザーの課題が伴います。 data-uri メソッドは、Chrome や Opera などの特定のブラウザでは有効ですが、IE9 や Firefox では不十分です。

代替アプローチ: クライアント側のファイル ダウンロード

これらの制限を克服するには、ユーザーがダウンロードできるようにファイル システム上に PDF ファイルを作成する別のアプローチがあります。これを実現するには、次のことを考慮してください。

応答タイプを Blob に設定する

XMLHttpRequest オブジェクトの responseType プロパティを "text" ではなく "blob" に構成します。これにより、クライアントは PDF データを Blob オブジェクトとして受信できるようになります。

Blob オブジェクトの利用

Web サービス リクエストから取得した応答を使用して新しい Blob オブジェクトを作成する.

オブジェクト URL の生成

PDF ファイルを表す Blob オブジェクトのオブジェクト URL を生成します。

ダウンロードの作成Link

HTML 要素を作成し、その href 属性と download 属性を設定します。 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 中国語 Web サイトの他の関連記事を参照してください。