pdfToImages

将 PDF 文件按页渲染为 PNG、JPEG 或 WebP 图片。

前置依赖

参数名	类型	说明
deps.pdfjs	Pdfjs	pdfjs-dist 实例，调用前需配置 worker
deps.File	Window['File']	File 构造函数
deps.createElement	Document['createElement']	创建 canvas 元素

环境要求

• 浏览器环境：安装 pdfjs-dist，并设置 worker：

import * as pdfjs from 'pdfjs-dist'

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url
).toString()

函数签名

function pdfToImages(
  file: File,
  options?: PdfToImagesOptions,
  deps: PdfToImagesDeps
): Promise<PdfToImagesResultItem[]>

interface PdfToImagesOptions {
  scale?: number
  outputFormat?: 'png' | 'jpeg' | 'webp'
  quality?: number
  startPage?: number
  endPage?: number
}

interface PdfToImagesResultItem {
  pageNumber: number
  file: File
  width: number
  height: number
}

参数

参数名	类型	必填	默认值	说明
file	File	是	-	输入 PDF 文件
options.scale	number	否	2	渲染缩放比例（约 144 DPI）
options.outputFormat	'png' | 'jpeg' | 'webp'	否	'png'	输出图片格式
options.quality	number	否	0.92	JPEG/WebP 质量（0–1）
options.startPage	number	否	1	起始页（从 1 开始）
options.endPage	number	否	最后一页	结束页（从 1 开始）
deps	PdfToImagesDeps	是	-	环境依赖

返回值

类型	说明
PdfToImagesResultItem[]	按页码升序排列的图片结果，每项含页码、File、宽高

工作原理

1. 读取 PDF 为 ArrayBuffer，通过 pdfjs.getDocument 加载文档
2. 按 startPage–endPage 遍历每一页
3. 用 page.getViewport({ scale }) 计算画布尺寸，渲染到 Canvas
4. 通过 canvas.toBlob 导出为指定格式，封装为 File 返回

使用示例

import { pdfToImages } from '@zengchaowu/shared/functions/file/pdfToImages'
import * as pdfjs from 'pdfjs-dist'

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url
).toString()

const images = await pdfToImages(
  pdfFile,
  { scale: 2, outputFormat: 'png', startPage: 1, endPage: 3 },
  {
    pdfjs,
    File: window.File,
    createElement: document.createElement.bind(document),
  }
)

images.forEach(({ pageNumber, file }) => {
  console.log(`第 ${pageNumber} 页:`, file.name, file.size)
})

使用注意

• pdfjs-dist 由调用方安装并注入，shared 不捆绑该依赖。
• 页码从 1 开始；超出范围会抛出错误。
• scale 越大图片越清晰，文件也越大；缩略图可用 1，打印级可用 3 或更高。