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