JavaScript を使用して Web サービスから返されたバイナリ文字列から PDF ファイルをダウンロードするにはどうすればよいですか?

JavaScript を使用して Web サービスから返されたバイナリ文字列から PDF ファイルを構築する方法

PDF ファイルをレンダリングしようとすると、次のような問題が発生します。 Ajax リクエスト経由で受信したバイナリ文字列。 Web ブラウザ、つまり Firefox と Internet Explorer 9 では、data:uri ソリューションを使用するときに問題が発生します。

問題

受け取ったバイナリ文字列は次のようになります。

%PDF-1.4....
.....
....hole data representing the file
....
%% EOF

試みられた解決策

data:uri を介したデータの埋め込みは、Opera と Chrome では効果的ですが、Firefox と Internet Explorer では失敗します。

考えられる解決策

ユーザーがダウンロードできるように、ファイル システム上に PDF ファイルを構築することを検討してください。この方法には、クライアント側のソリューションと主要なブラウザとの互換性が必要です。

改訂されたソリューション

XMLHttpRequest の responseType を「blob」に変更します。次に、 要素で window.open 関数を download 属性に置き換えます。このプロセスでは、XMLHttpRequest 応答の「.pdf」ファイルとしてのダウンロードが開始されます。

<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>

以上がJavaScript を使用して Web サービスから返されたバイナリ文字列から PDF ファイルをダウンロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。