Base64 を PDF に変換

API のレスポンスから Base64 をコピーする

請求書、配送ラベル、レポート、署名済み契約書を生成するサービスは、{"filename": "label.pdf", "data": "JVBERi0..."} のように JSON の中に PDF を入れて返すことがよくあります。フィールド名の後ろにある引用符の間のテキストだけをコピーし、次の点に注意してください。

• エスケープされたスラッシュ。PHP の json_encode など一部の JSON エンコーダーは、すべての / を \/ と書き出します。/ は通常の Base64 文字なので、貼り付ける前に \/ を / に置き換えるか、先に JSON を解析してから値をコピーしてください。
• 引用符とカンマ。前後の引用符と末尾のカンマは含めないでください。
• 改行。76 文字で折り返された値のように、Base64 の中にあるスペースや実際の改行は問題なく、削除する必要はありません。一方、生の JSON に含まれる文字としての \n や \r\n は話が別です。これらはバックスラッシュを含む文字の並びなので、削除する必要があります。

ブラウザの開発者ツールで、解析済みの表示から値をコピーすれば、こうしたエスケープの問題をすべて避けられます。

メールから PDF 添付ファイルを取り出す

メールの添付ファイルは、生のメッセージデータの中に Base64 で格納されています。メッセージのソースを開き（Gmail では「メッセージのソースを表示」、Thunderbird では「メッセージのソース」、Apple Mail では「ソース」）、ヘッダーに Content-Type: application/pdf（またはファイル名が .pdf の application/octet-stream）と Content-Transfer-Encoding: base64 を含むパートを探します。それらのヘッダーの下にある空行の次から、MIME 境界である -- で始まる次の行の手前までのブロックをコピーしてください。ここにはそのまま貼り付けてかまいません。改行は無視されます。

自作の Web アプリで Base64 の PDF を表示する

フロントエンドで受け取った Base64 の PDF を表示するには、data URI よりも Blob URL のほうが確実です。data URI は、ブラウザによっては新しいタブで開くことを拒否されます。

const bytes = Uint8Array.from(atob(base64), c => c.charCodeAt(0));
const blob = new Blob([bytes], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
window.open(url); // または <iframe> の src として使用

文書が不要になったら URL.revokeObjectURL(url) を呼び出して、メモリを解放してください。なお、atob は標準の Base64 アルファベットしか受け付けないため、URL セーフな入力（- と _）は先に変換しておく必要があります。