js pdf转图片

// 使用 jsPDF 和 html2canvas 将 PDF 转换为图片的示例代码

// 首先需要引入两个库：html2canvas 和 pdf.js
// 可以通过 npm 安装或者直接在 HTML 文件中使用 CDN 引入

// npm 安装
// npm install html2canvas pdfjs-dist

// 或者使用 CDN
// <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
// <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>

async function pdfToImage(pdfUrl) {
    // 加载 PDF 文件
    const loadingTask = pdfjsLib.getDocument(pdfUrl);
    const pdf = await loadingTask.promise;

    // 获取 PDF 的总页数
    const totalPages = pdf.numPages;

    // 创建一个容器来保存所有的图片
    const imagesContainer = document.createElement('div');
    imagesContainer.style.display = 'flex';
    imagesContainer.style.flexDirection = 'column';

    for (let pageNumber = 1; pageNumber <= totalPages; pageNumber++) {
        // 获取指定页面
        const page = await pdf.getPage(pageNumber);

        // 设置缩放比例
        const scale = 1.5;
        const viewport = page.getViewport({ scale });

        // 创建 canvas 元素
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // 渲染 PDF 页面到 canvas
        const renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        await page.render(renderContext).promise;

        // 将 canvas 转换为图片
        const img = new Image();
        img.src = canvas.toDataURL('image/png');
        imagesContainer.appendChild(img);
    }

    // 将包含所有图片的容器添加到文档中
    document.body.appendChild(imagesContainer);
}

// 示例调用
pdfToImage('example.pdf');

解释说明：

1. 引入库：我们使用了 html2canvas 和 pdf.js 两个库。pdf.js 用于解析和渲染 PDF 文件，而 html2canvas 用于将 DOM 元素（如 canvas）转换为图片。
2. 加载 PDF：通过 pdfjsLib.getDocument(pdfUrl) 加载 PDF 文件，并获取其总页数。
3. 逐页渲染：对于每一页，我们获取其内容并将其渲染到一个 canvas 元素上。
4. 转换为图片：使用 canvas.toDataURL('image/png') 将 canvas 转换为图片格式（PNG），并将其添加到一个容器中。
5. 显示图片：最终将包含所有图片的容器添加到文档中。

如果你不需要在网页中显示图片，而是希望下载这些图片，可以在生成图片后进一步处理，例如使用 a 标签触发下载。