快速開始
本頁說明 pdf2image 的安裝方式，以及在瀏覽器完成第一次 PDF 轉圖片。
前置需求
| 項目 | 需求 |
|---|---|
| 執行環境 | 支援 ES2022 私有欄位（#field）、canvas、Promise 的現代瀏覽器 |
| 網路 | 可連線 cdnjs.cloudflare.com（pdf.js 3.4.120、JSZip 3.7.1）與 cdn.jsdelivr.net（樣式表） |
| 輸入 | PDF 的 ArrayBuffer，通常來自 File.arrayBuffer() |
pdf2image 只能在瀏覽器執行；Node.js 沒有 document 與 window，無法直接使用。
安裝
npm
npm i @pardnchiu/pdf2image
CDN（UMD）
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/pdf2image@1.1.2/dist/pdf2image.js"></script>
UMD 版載入後會註冊全域 window.pdf2image。
CDN（ES Module）
import { pdf2image } from "https://cdn.jsdelivr.net/npm/@pardnchiu/pdf2image@1.1.2/dist/pdf2image.esm.js";
ESM 版與 UMD 版是同一份程式，只在檔尾多匯出 window.pdf2image。
第一次轉換
下方範例載入時會自動轉換 /assets/sample.pdf（3 頁），也可以從檔案選擇器挑自己的 PDF。
<input type="file" accept="application/pdf" id="pick">
<div id="pages"></div>
<script>
async function run(buffer) {
const converter = new pdf2image({ file: buffer, type: "png", scale: 0.5 });
try {
const images = await converter.convert();
document.getElementById("pages").replaceChildren(
...images.map(src => Object.assign(document.createElement("img"), { src, width: 120 }))
);
console.log("pages:", images.length);
} catch (err) {
console.log("failed:", String(err));
}
}
document.getElementById("pick").addEventListener("change", async e => {
const file = e.target.files[0];
if (file) run(await file.arrayBuffer());
});
addEventListener("load", async () => {
run(await (await fetch("/assets/sample.pdf")).arrayBuffer());
});
</script>
三個要點：
file必須是ArrayBuffer，不是File物件- 等
load事件後再呼叫convert()，因為 pdf.js 是在套件載入時才非同步注入（見 核心概念） - 失敗時 reject 的值可能是字串也可能是
Error，用String(err)統一輸出（見 轉換流程）