L08084のブログ

中安拓也のブログ

【IE11】PDFファイルを保存せずにそのまま開けるようにする

はじめに

SPAアプリ上でIE11ブラウザを使ってPDFファイルを参照する場合に、PDFファイルをダウンロードせずにそのまま開いて参照したいとの要望をクライアントからいただいたため、ソースコードを修正した。

環境

Angularを使用して作成されたSPAアプリ。利用ブラウザはIE11

  • Angular@6.1.2
  • typescript@2.8.4
  • Internet Explorer11

msSaveBlobからmsSaveOrOpenBlobに変更

修正内容だが、ファイルをローカルに保存する時に呼び出しているAPIをwindow.navigator.msSaveBlobからwindow.navigator.msSaveOrOpenBlob変更して、ポップアップに保存ボタンだけでなくファイルを開くボタンも表示されるようにした。

こうすることによってPDFファイルを保存してから閲覧するのではなくて、ファイルを保存せずに閲覧することもできるようにした。

// 修正前のコード
window.navigator.msSaveBlob(blob, fileName);

// 修正後のコード
window.navigator.msSaveOrOpenBlob(blob, fileName);

下記のように、msSaveBlobではなくmsSaveOrOpenBlobを使用することでポップアップにファイルを開くボタンを表示することができる。

f:id:l08084:20200406224401p:plain
msSaveBlobのポップアップ

f:id:l08084:20200406223933p:plain
msSaveOrOpenBlobのポップアップ

参考サイト

File API で作成した blob をダウンロードする | Hebikuzure's Tech Memo

IE11にはファイルをローカルに保存するJavaScriptのAPIが2種類用意されている。 - Qiita

msSaveBlob - Web APIs | MDN

msSaveOrOpenBlob - Web APIs | MDN