React 中使用 pdf.js 将 pdf 转换成图片

pdf.js 主要用于在网页上展示 pdf 文档，是一个用户解析和渲染 pdf 文件的开源库。本文主要介绍如何在 react 中使用 pdf.js 解析 pdf 文件，并最终转换成图片形式。

一、 安装 pdf.js 库文件

要在 react 中使用 pdf.js，首先需要安装对应的依赖。对此 pdf.js 提供了 pdfjs-dist 库，我们可以通过 npm 进行下载.

npm install pdfjs-dist --save

二、 在组件中使用。

在 pdf.js 的 issues 中找到 pdf.js 在 react 中的使用方法，参考 issue：【Using pdf.js in React】 

1. 引入 pdf.js 文件

2. 编写文件上传组件

3. 编写上传属性和方法

4. pdf 解析

5. canvas 设置

6. 生成图片

从上面的代码可以看出，由 pdf 生成图片主要需要经历以下几个过程：

上传 pdf 文件 -> 解析 pdf -> 生成 canvas 对象 -> 转换成图片 -> （插入页面或导出文件）

三、在项目中查看效果

导入后查看

完整的 jsx 代码如下：

import React from 'react';
import { Modal } from 'antd'
import * as PDFJS from "pdfjs-dist";
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

const Dragger = Upload.Dragger;

PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;

export default class ImportPdf extends React.Component {
    state = {
        pdf: '',
    }

    openPage(pdfFile, pageNumber, context) {
        var scale = 2;
        pdfFile.getPage(pageNumber).then(function (page) {
            // reference canvas via context
            const viewport = page.getViewport(scale);
            var canvas = context.canvas;
            canvas.width = viewport.width;
            canvas.height = viewport.height;
            canvas.style.width = "100%";
            canvas.style.height = "100%";
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
        });
        return;
    }

    exportImg(self) {
        // 将 canvas 导出成 img
        $('#pdf-container canvas').each(function (index, ele) {
            var canvas = document.getElementById("pageNum" + (index + 1));
            // 将 canvas 转成 base64 格式的图片
            let base64ImgSrc = canvas.toDataURL("image/png")
            const img = document.createElement("img")
            img.setAttribute('class', 'pdf-img');
            img.src = base64ImgSrc
            img.style.width = '100%';
            // 将图片挂载到 dom 中
            $('#pdf-container').append(img);
        });
    }

    readPdf(file) { 
        // pdf.js无法直接打开本地文件,所以利用FileReader转换
        const reader = new FileReader();
        reader.readAsArrayBuffer(file);
        reader.onload = function (e) {
            const typedarray = new Uint8Array(this.result);
            const loadingTask = PDFJS.getDocument(typedarray);
            loadingTask.promise.then(function (pdf) {
                if (pdf) {
                    // pdf 总页数
                    const pageNum = pdf.numPages;
                    for (let i = 1; i <= pageNum; i++) {
                        // 生成每页 pdf 的 canvas
                        const canvas = document.createElement('canvas');
                        canvas.id = "pageNum" + i;
                        // 将 canvas 添加到 dom 中
                        $('#pdf-container').append(canvas);
                        const context = canvas.getContext('2d');
                        self.openPage(pdf, i, context);
                    }
                    setTimeout(() => {
                        self.exportImg(self)
                    }, 1000);
                }
            }).catch(function (reason) {
                console.error("Error: " + reason);
            });
        };
    }

    render() {
        const self = this;
        const uploadProps = {
            name: 'file',
            accept: '.pdf',
            action: '',
            onChange(info) {
                const status = info.file.status;
                if (status != 'done') {
                    self.setState({ loading: true });
                }
                if (status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }
                if (status === 'done') {
                    self.setState({ loading: false });
                    message.success(`${info.file.name} 导入成功`);
                    // 解析 pdf 文件
                    self.readPdf(info.file.originFileObj);
                } else if (status === 'error') {
                    console.log(`${info.file.name} 导入失败`);
                }
            },
        };
        return (
            <Modal
                title="导入pdf"
                width={480}
                className="import-pdf-modal"
                footer={null}
            >
                <Spin tip="导入中" spinning={this.state.loading}>
                    <Dragger {...uploadProps} id="document">
                        <p className="ant-upload-drag-icon">
                            <Icon type="inbox" />
                        </p>
                        <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
                        <p className="ant-upload-hint">支持扩展名：.pdf</p>
                        <div id='pdf-container' style={{ height: 0, overflow: 'hidden' }}></div>
                    </Dragger>
                </Spin>
            </Modal>
        )
    }
}

【参考】

pdf.js

Is there a pre-built version PDF.js available?

pdf2img