基于lit-element的Web Component集成pdf.js报错getDocument不是函数如何解决

1. 修正pdfjs-dist的导入与初始化 #

pdfjsLib.getDocument is not a function报错的直接原因是新版pdfjs-dist的导入规则变更，同时缺少必要的worker配置，按如下方式修改导入代码：

// 替换原有的pdfjs导入代码
import * as pdfjsLib from 'pdfjs-dist/build/pdf.js';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry.js';

// 全局配置worker路径，此步骤为必填项
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

如果使用的是2.x旧版本pdfjs-dist，也可以尝试使用默认导入写法：import pdfjsLib from 'pdfjs-dist'，同样需要配置worker路径。

2. 修正Lit组件render方法返回值 #

原代码的render方法仅生成模板但未返回，导致shadowRoot中没有实际渲染的DOM元素，后续操作会报错，修改为：

render(){
    return html`
        <style>
            .pdf-page{
                margin: 12px 0;
                box-shadow: 0 3px 6px #0004;
                border-radius: 6px;
            }
        </style>
        <div id="pdfContainer"></div>
    `;
}

这里改用容器div动态插入多页canvas，避免多页PDF渲染时前后页覆盖的问题。

3. 修正setPdf方法的this指向与多页渲染逻辑 #

原代码中普通回调函数的this指向错误，且单canvas无法适配多页PDF，修改setPdf方法如下：

async setPdf(file) {
    console.log("pdf-viewer setPdf path: ", file)
    await this.readyPromise;
    const container = this.shadowRoot.getElementById('pdfContainer');
    // 清空之前的渲染内容
    container.innerHTML = '';

    const loadingTask = pdfjsLib.getDocument(file);
    try {
        const pdf = await loadingTask.promise;
        console.log('PDF loaded，总页数：', pdf.numPages);
        const scale = 1.5;

        // 循环渲染每一页
        for (let i = 1; i <= pdf.numPages; i++) {
            const page = await pdf.getPage(i);
            console.log('第'+i+'页加载完成');
            const viewport = page.getViewport({scale: scale});

            // 为每一页创建独立canvas
            const canvas = document.createElement('canvas');
            canvas.className = 'pdf-page';
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            container.appendChild(canvas);

            // 渲染页面
            const renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            await page.render(renderContext).promise;
            console.log('第'+i+'页渲染完成');
        }
    } catch (reason) {
        console.error('PDF加载或渲染失败：', reason);
    }
}

4. （可选）优化属性绑定 #

Web Component的attribute不区分大小写，建议父组件使用Lit的property绑定方式传值，避免属性匹配问题：

<pdf-viewer id="pdfElement" .Pdf="${URL.createObjectURL(this.Pdf)}"></pdf-viewer>

在属性名前加.表示直接绑定组件的property，不需要通过attribute传递，大小写完全匹配定义的Pdf属性。

内容的提问来源于stack exchange，提问作者Salvo