pdfjs-dist react

### 集成和使用 `pdfjs-dist` 库于 React 项目

#### 导入库
为了在React应用中利用`pdfjs-dist`库来处理PDF文档，首先需要安装该库以及其工作者线程支持文件。通过NPM命令可以完成这一过程：

npm install pdfjs-dist

接着，在项目的适当位置导入必要的模块，并设置全局工作线程选项以确保PDF解析器能够正常运作。

import * as PDFJS from "pdfjs-dist";
import workerSourcePath from "pdfjs-dist/build/pdf.worker.entry";

// 设置worker源路径以便加载外部工人脚本
PDFJS.GlobalWorkerOptions.workerSrc = workerSourcePath;

此部分代码片段展示了如何正确地初始化`pdfjs-dist`环境[^4]。

#### 加载与渲染PDF文档
一旦完成了上述准备工作，则可以通过创建一个新的函数来负责读取指定的PDF文件并将其内容绘制到Canvas元素上。下面是一个简单的例子说明怎样实现这一点：

import React, { useEffect, useRef } from "react";
import * as PDFJS from "pdfjs-dist";
import workerSourcePath from "pdfjs-dist/build/pdf.worker.entry";

function PdfRenderer({ fileUrl }) {
    const canvasRef = useRef(null);

    useEffect(() => {
        async function loadAndRenderPdf() {
            try {
                // 初始化PDF.js的工作线程配置
                PDFJS.GlobalWorkerOptions.workerSrc = workerSourcePath;

                // 获取PDF对象实例
                let loadingTask = await PDFJS.getDocument(fileUrl);
                let pdfDoc = await loadingTask.promise;

                // 取得第一页的内容描述符
                let pageNumber = 1;
                let pageRenderingPromise = pdfDoc.getPage(pageNumber).then((page) => {
                    // 准备画布上下文用于绘图
                    var viewport = page.getViewport({ scale: 1 });
                    var context = canvasRef.current.getContext('2d');
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };

                    // 渲染页面至画布
                    page.render(renderContext);
                });

                // 处理可能发生的错误情况
                pageRenderingPromise.catch(function(reason){
                    console.error(`Error rendering the document ${reason}`);
                });
                
            } catch (error) {
                console.log(error.message || error);
            }
        }

        if (fileUrl !== undefined && typeof fileUrl === 'string') {
            loadAndRenderPdf();
        }
        
    }, [fileUrl]);

    return (
        <canvas ref={canvasRef}></canvas>
    );
}

export default PdfRenderer;

这段代码实现了基本的功能——接收一个指向PDF资源的位置作为属性参数，并在一个HTML Canvas内呈现出来。注意这里采用了异步编程模式（async/await），使得整个流程更加清晰易懂。