Base64 エンコードされた PDF ファイルをブラウザで扱う
諸々の事情で，Base64 化されたファイル文字列をブラウザで復元して扱いたいケースがあり，そのとき検証した作業ログ．画像と PDF データを扱う． 画像ファイルの場合 Base64 エンコードされた画像データは，<img> タグの src に指定することができる． Data URLs の形式で，次のように記述する． <!-- data:[<mediatype>][;base64],<data> --> <img src="data:image/png;base64,R0lGODlhAQABAIAA•••"/> PDF ファイルの場合 PDF データは，Blob に変換した後，ファイル URL を取得しアクセスすると表示できる． const base64Str = 'JVBERi0xLjMNCiXi48/TDQoNCjE•••'; const file = new Blob([atob(base64Str)], { type: 'application/pdf' }); const fileURL = URL.createObjectURL(file); window.open(fileURL); と，思ったが正常に表示できるケースと，表示されないケースがあり，原因がわからず．． 具体的には，枠は表示されるが内容が真っ白になってしまうという状況． pdf.js を使う Mozilla 製の pdf.js を使うと正常に表示できた． pdf.js には viewer もついているが，.pdf ファイルの実態が必要になるので使わず，今回はファイル内容を直接扱っている． ビルド済みのパッケージ pdfjs-dist を使う． .getDocument で Bae64 化されたファイルを読み込み，pdfDoc.getPage(1).render() でファイル内容をレンダリングする．この例は，1ページだけレンダリングするが，pdfDoc.numPages で得られるページ数分描画すれば複数ファイル内容を一度に表示可能． import PDFJS from 'pdfjs-dist'; const base64Str = 'JVBERi0xLjMNCiXi48/TDQoNCjE•••'; const canvasContainer = document....