2017年6月19日

Angularでサーバーから取得したPDFを表示する


Angularでサーバーから取得したPDFを表示するサンプルを作ってみました。


実際に動くものはこちら

全ソースコードはこちら。



サーバーからPDFファイルを取得する部分



サンプルではGitHub Pagesからスタティックなファイルをgetしていますが、Web Apiから動的に生成されたファイルを取って来る場合でも全く同じです。



受け取ったPDFファイルをクライアント側で表示する部分




URL.createObjectURL(blob) でblobからデータURLを生成して、それをHTML側で object タグの data 属性にバインドして表示しています。

ただそれだけだとAngularのセキュリティ制限でエラーになるので、DomSanitizerのbypassSecurityTrustResourceUrl()というメソッドを呼ぶ必要がありました。


あ、それからこのサンプルは現時点ではIEでは上手く動かない様です。

ChromeとFirefoxでは問題無く動作しました。

MacのSafariではobjectタグでの表示はされましたが、Downloadのリンクをクリックしても別タブで表示されるだけでダウンロードはされませんでした。

ブラウザ objectタグでの表示 aタグでのダウンロード
Chrome
Firefox
Safari
Edge ×
IE11 × ×