JS PDF转图片|极客笔记

JS PDF转图片

在前端开发中，有时候我们需要将 PDF 文件转换成图片来展示或处理。而在浏览器环境中，我们可以利用 JavaScript 来实现这一功能。本文将详细介绍如何使用 JavaScript 将 PDF 文件转换成图片。

准备工作

在进行 PDF 转图片之前，我们需要安装一个 JavaScript 库叫做 pdf.js。pdf.js 是一个开源的 JavaScript 库，用于在网页中渲染和操作 PDF 文件。你可以通过 npm 安装 pdf.js：

npm install pdfjs-dist

安装完成后，我们可以开始使用 pdf.js 来进行 PDF 转图片的操作。

PDF 转图片步骤

步骤一：加载 PDF 文件

首先，我们需要加载要转换的 PDF 文件。可以通过 pdf.js 的 getDocument 方法来加载 PDF 文件，示例代码如下：

const pdfPath = 'example.pdf';

pdfjsLib.getDocument(pdfPath).promise.then(pdf => {
    // PDF 加载完成后的操作
}).catch(error => {
    console.error(error);
});

步骤二：获取 PDF 页面

一旦 PDF 文件加载完成，我们需要获取 PDF 文件的页面。每个 PDF 文件有多个页面，我们需要依次处理每个页面。可以通过 pdf.getPage 方法来获取 PDF 页面，示例代码如下：

const pageNum = 1;

pdf.getPage(pageNum).then(page => {
    // 获取到 PDF 页面后的操作
}).catch(error => {
    console.error(error);
});

步骤3：渲染 PDF 页面到 Canvas

接下来，我们需要将 PDF 页面渲染到 Canvas 元素上。这样我们就可以将 Canvas 中的内容转换成图片。可以通过 page.render 方法来渲染 PDF 页面到 Canvas，示例代码如下：

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

const viewport = page.getViewport({ scale: 1.5 }); // 缩放比例可根据需求调整

canvas.width = viewport.width;
canvas.height = viewport.height;

const renderContext = {
    canvasContext: context,
    viewport: viewport
};

page.render(renderContext).promise.then(() => {
    // PDF 页面渲染到 Canvas 后的操作
}).catch(error => {
    console.error(error);
});

步骤四：将 Canvas 转换成图片

最后一步，我们需要将 Canvas 转换成图片。可以通过 Canvas 的 toDataURL 方法将 Canvas 转换成 Data URL，然后创建一个 Image 元素来展示图片，示例代码如下：

const imageDataURL = canvas.toDataURL('image/png');
const image = new Image();

image.src = imageDataURL;

document.body.appendChild(image);

完整示例代码

下面是一个完整的示例代码，将 PDF 文件转换成图片并展示在页面上：

const pdfPath = 'example.pdf';
const pageNum = 1;

pdfjsLib.getDocument(pdfPath).promise.then(pdf => {
    pdf.getPage(pageNum).then(page => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');

        const viewport = page.getViewport({ scale: 1.5 });

        canvas.width = viewport.width;
        canvas.height = viewport.height;

        const renderContext = {
            canvasContext: context,
            viewport: viewport
        };

        page.render(renderContext).promise.then(() => {
            const imageDataURL = canvas.toDataURL('image/png');
            const image = new Image();

            image.src = imageDataURL;

            document.body.appendChild(image);
        }).catch(error => {
            console.error(error);
        });
    }).catch(error => {
        console.error(error);
    });
}).catch(error => {
    console.error(error);
});