将PDF流使用 canvas 绘制展示在页面上（一）

news2025/2/28 3:08:19

将PDF流展示在页面上

使用 pdfjs-dist 库来渲染 PDF 页面到 canvas 上进行绘制展示

安装 `pdfjs-dist` 依赖

npm install pdfjs-dist
或者
yarn add pdfjs-dist

创建一个组件来处理 PDF 流的加载和渲染

该组件中是一个包含 PDF 文件的 Base64。
将 pdf 流传入该组件中使用

/** @format */

import React, { useState, useEffect, useRef } from 'react';
var pdfjsLib = require('pdfjs-dist/es5/build/pdf.js');
// eslint-disable-next-line import/first
import 'pdfjs-dist/es5/build/pdf.worker.entry';

const PdfViewer = ({ url, id }) => {
    const [pageNumbers, setPageNumbers] = useState(0);
    const [currentPage, setCurrentPage] = useState(1);
    const [loading, setLoading] = useState(true);
    const [rendering, setRendering] = useState(false);
    const pdfRef = useRef(null);
    function renderPdf(pdfFile) {
        let canvas = document.getElementById(id);
        let canvasContext = canvas.getContext('2d');
        pdfFile.getPage(currentPage).then((page) => {
            //逐页解析PDF
            var viewport = page.getViewport({ scale: 5 }); // 页面缩放比例，值越大越清晰
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            canvasContext.clearRect(0, 0, canvas.width, canvas.height);
            var renderContext = {
                canvasContext: canvasContext,
                viewport: viewport,
                rotate: 90,
            };
            setRendering(true);
            page.render(renderContext).promise.finally(() => {
                setRendering(false);
            }); //渲染生成
        });
    }

    useEffect(() => {
        let loadingTask = pdfjsLib.getDocument({
            url: url,
            //cMapUrl: './cmaps/',
            //cMapPacked: true,
        });
        loadingTask.promise
            .then((pdf) => {
                // console.log(pdf.numPages);
                pdfRef.current = pdf;
                setPageNumbers(pdf.numPages);
                renderPdf(pdf);
            })
            .catch((error) => {
                console.log(error);
            })
            .finally(() => {
                setLoading(false);
            });
    }, []);

    useEffect(() => {
        if (pdfRef.current) {
            window.scrollTo({ top: 0 });
            renderPdf(pdfRef.current);
        }
    }, [currentPage]);

    return (
        <div>
            <canvas id={'pdf' + id} style={{ width: '100%' }} />
        </div>
    );
};

export default PdfViewer;

使用示例

import React from 'react';
import PdfViewerfrom './PdfViewer.jsx';
 render() {
 const url= 'XXXX....BYFhEdCmVuZHN0cmVhbQplbmRvYmoKc3RhcnR4cmVmCjg2NTkxCiUlRU9GCg=='// base64 格式
	  return (
		  	<PdfViewer 
		  		id={'pdf_file'} 
		  		url={`data:application/pdf;base64,${url}`}
		  	></PdfViewer>
	  )
 }