使用方法
- 將 Base64 字串,或以 data:application/pdf;base64, 開頭的 Data URI 貼上到輸入框中。
- 確認檔案被識別為 PDF,並在檢視器中閱讀內容。
- 下載 PDF,儲存到你的裝置上。
從介面響應中複製 Base64
生成發票、快遞面單、報表或已簽署合同的服務,經常把 PDF 放在 JSON 裡返回,例如 {"filename": "label.pdf", "data": "JVBERi0..."}。只需複製欄位名後面引號之間的文字,並注意以下幾點:
- 轉義的斜槓。有些 JSON 編碼器(例如 PHP 的
json_encode)會把每個/寫成\/。/本身就是 Base64 的普通字元,所以貼上前要把\/替換為/,或者先解析 JSON 再複製欄位值。 - 引號和逗號。不要複製兩端的引號和末尾的逗號。
- 換行。Base64 中的空格和真正的換行(例如按 76 個字元分行的值)不影響解碼,不必刪除。原始 JSON 裡字面上的
\n或\r\n則不同,它們是反斜槓字元,必須刪掉。
在瀏覽器開發者工具中,從解析後的視圖裡複製欄位值,就能避開以上所有轉義問題。
從電子郵件中提取 PDF 附件
郵件附件以 Base64 形式儲存在原始郵件中。開啟郵件原始碼(Gmail 中為「顯示原始郵件」,Thunderbird 中為「訊息原始碼」,Apple Mail 中為「原始來源」),找到郵件頭包含 Content-Type: application/pdf(或檔名為 .pdf 的 application/octet-stream)以及 Content-Transfer-Encoding: base64 的部分。複製這些郵件頭下方空行之後的整段文字,直到下一個以 -- 開頭的行為止,那一行是 MIME 分隔符。直接貼上到這裡即可,換行會被忽略。
在自己的網頁應用中顯示 Base64 PDF
如果前端收到 Base64 格式的 PDF 並需要顯示,使用 Blob URL 比 Data URI 更可靠,因為有些瀏覽器拒絕在新標籤頁中開啟 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 安全格式(含 - 和 _)需要先轉換。
常見問題
為什麼我的 Base64 沒有被識別為 PDF?
JVBERi0 開頭,這是 %PDF- 的編碼。如果開頭是引號、欄位名或其他文字,請先刪掉。如果以 SlZCRVJ 開頭,說明 PDF 被編碼了兩次:先用 Base64 解碼解一次,再把結果貼上到這裡。其他情況下,資料可能是別的檔案型別,可以用 Base64 轉檔案識別。PDF 能下載但打不開,是哪裡出了問題?
最常見的原因是 Base64 被截斷了。日誌、控制台和資料庫工具經常截斷很長的值,而 PDF 用來定位各頁內容的交叉引用表位於檔案末尾附近,缺少結尾的 PDF 無法讀取。請重新複製完整的值,最好把原始響應直接儲存為檔案。
手機上預覽是空白的,檔案壞了嗎?
不一定。有些移動瀏覽器無法在頁面內顯示 PDF。下載檔案後用 PDF 閱讀器開啟,就能確認檔案是否完好。
可以解碼有密碼保護的 PDF 嗎?
可以。解碼會逐位元組還原檔案,加密也會原樣保留。預覽可能會要求輸入密碼,也可能顯示為空白;下載後的檔案在任何 PDF 閱讀器中輸入密碼即可開啟。
文件會被上傳到別處嗎?
不會。解碼和預覽都在瀏覽器中進行,合同、工資單、病歷等機密 PDF 都只留在你的裝置上。