web-dev-qa-db-ja.com

JavaScriptを使用してブラウザでPDFストリームを表示する方法

Jqueryのajaxメソッドを使用して、既存のWCF Webサービス（PDFをバイトストリームとして返す））にアクセスしています。

サービスへの呼び出しが完了すると、PDF（変数にはバイナリデータが含まれ、「％PDF-1.4 ...」で始まる）を含むjavascript変数になります。

これをPDF新しいブラウザウィンドウに表示したいのですが、これを達成するのが困難です。

これまでの私の調査では、データuriを使用して必要なことを達成できる可能性があることが示されているため、ajax呼び出しの完了時に呼び出されるコードは次のとおりです。

function GotPDF(data)
{
    // Here, data contains "%PDF-1.4 ..." etc.
    var datauri = 'data:application/pdf;base64,' + Base64.encode(data);
    var win = window.open("", "Your PDF", "width=1024,height=768,resizable=yes,scrollbars=yes,toolbar=no,location=no,directories=no,status=no,menubar=no,copyhistory=no");
    win.document.location.href = datauri;
}

これにより、新しいブラウザウィンドウが開きますが、内容は空白です。

興味深いことに、file：// c：/tmp/example.pdfなどのファイルuriを使用して、ローカルディスク上の既存のファイルをブラウザ（IE9）でポイントすると、同じ結果、つまり空白が返されます窓。

これを表示する方法はありますかPDF data？

javascriptjquerypdfbrowser
19
Dave W

書いたコードは何も表示せず、単に空白のウィンドウを開きます（location.hrefは閲覧履歴のハッシュであり、ページのコンテンツではありません）。

PDFを表示するには、少なくとも次のオプションがあります。

×PDFビューアをembedまたはobjectタグ内に埋め込みます。想像するほど簡単ではないかもしれませんが、サンプルコードについては this post をご覧ください。

<object data="your_url_to_pdf" type="application/pdf">
    <embed src="your_url_to_pdf" type="application/pdf" />
</object>

これは基本的なコードですが、より高いブラウザ間の互換性が必要な場合は、リンクされた投稿で私が言うことに従うことをお勧めします。

×ローカルコンピューターにファイルをダウンロードします（ファイルを生成するWebサービスメソッドの完全なURLを追加するだけで、適切なContent-Dispositionを追加することを忘れないでくださいヘッダー）。

×ファイルを新しいブラウザウィンドウに開きます。 normalaタグを作成して、新しいウィンドウに表示するPDFオンラインファイル。hrefをjavascript:functionNameに変更すると、その関数で、Webサービスメソッドの呼び出しに使用するURIが生成されます。

何をするにしても、レスポンスに適切なMIMEタイプを設定することを忘れないでください。また、メソッドはバイトストリーム（エンコードされている場合でも）を返さず、Webブラウザに対して有効なレスポンスを返す必要があります。

14
Adriano Repetti

<embed>または<object>タグを使用して、サーバーからのストリーミングされたPDFファイル（または他のファイルタイプ））を表示する場合：

<object data="SomeServlet?do=get_doc&id=6" type="application/pdf" width="800" height="400">

サーバーが適切なhttp content-disposition値（この場合はinline）を送信していることを確認してください。

6
Morey