记录PDF转图片,使用image标签渲染

1. 引用pdfjs-dist库来获取PDF是否有多页
2. scale可以看做是转成img的清晰度.dpi设置越高,转换的img大小越大,根据实际情况换算即可.

import PDFJS from "pdfjs-dist";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
const url = new URL(pdfjsWorker, import.meta.url).href;
async function pdfToImgFun(pdfUrl: string) {
	console.time("myTimer");
	let dpi = 100; // 设置 DPI
	let scale = dpi / 72; // 计算缩放比例

	// 指定 pdf.js 的资源路径
	PDFJS.GlobalWorkerOptions.workerSrc = url;
	const loadingTask = PDFJS.getDocument(pdfUrl);
	const pdf = await loadingTask.promise;
	const arr: any = [];
	const list = await new Promise(async (resolve: any) => {
		for (let index = 0; index < pdf.numPages; index++) {
			// 渲染第一页到一个 <canvas> 元素上
			const page = await pdf.getPage(index + 1);
			const viewport = page.getViewport({ scale });
			const canvas = document.createElement("canvas");
			const canvasContext = canvas.getContext("2d");
			canvas.height = viewport.height;
			canvas.width = viewport.width;
			const renderContext = {
				canvasContext,
				viewport
			};
			await page.render(renderContext as any).promise;
			// 将画布导出为独立的图片文件
			const imgDataUrl = canvas.toDataURL();
			arr.push(imgDataUrl);
			if (index === pdf.numPages - 1) {
				resolve(arr);
			}
		}
	});
	console.timeEnd("myTimer");
	return list;
}

3. 最后得到数组集合渲染到页面上即可!