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