ブラウザー間で JavaScript のバイナリ Web サービス応答から PDF を生成する方法

JavaScript でのバイナリ Web サービス応答からの PDF の構築

背景:

この質問Ajax リクエスト経由で取得したバイナリ文字列から PDF ファイルを生成するという課題に対処します。提供されるバイナリ ストリームは、PDF ヘッダーとコンテンツで構成されます。 data-uri メソッドは一部のブラウザでは機能しますが、Internet Explorer 9 と Firefox では失敗します。

問題:

問題は、クロスブラウザを見つけることにあります。 Web サービス実装の編集に依存せずに、バイナリ応答から PDF ファイルを構築できるソリューションです。

解決策:

この問題を解決するには、次のアプローチがあります。提案:

Blob とダウンロード属性の活用:

XMLHttpRequest オブジェクトの responseType を「blob」に設定すると、応答は Blob オブジェクトとして受信されます。この BLOB は PDF ファイルを表します。その後、createObjectURL メソッドを使用してダウンロード リンクを作成し、ユーザーが 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>

利点:

この方法には次の利点があります:

• IE9、Firefox、Opera、Chrome、Safari を含むすべての主要なブラウザとの互換性
• 一部のブラウザでの data-uri アプローチで発生する欠陥を回避します
• ユーザーが PDF ファイルを簡単にダウンロードできるようにします

以上がブラウザー間で JavaScript のバイナリ Web サービス応答から PDF を生成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。