关于vue + pdfjs-dist v2.2.228 踩坑问题

在pdfjs-distv2.2.228版本中，创建PDFViewer时，ID为pdfViewerId的div内部必须包含一层额外的div，否则会导致错误。代码示例展示了正确和错误的结构。在mounted生命周期钩子中，初始化PDFViewer并加载文档时，需要确保容器的正确设置，否则会抛出异常。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ID 为 pdfViewerId 的div内部必须在包含一层 <div> 否则会报错，如一下代码：

<div ref="pdfViewer" id="pdfViewerId">
     <!--必须在包含一层div，否则报错-->
     <div></div>
</div>

否则，以下代码会报错：

  const pdfViewer = new PDFViewer({
            container: _this.$refs.pdfViewer
});

import '../../utils/turn/jquery.min.1.7.js';
import pdfjsLib from 'pdfjs-dist/build/pdf'
import { PDFViewer, PDFPageView } from 'pdfjs-dist/web/pdf_viewer';
import workerSrc from 'pdfjs-dist/build/pdf.worker.entry';
pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
export default {
    name: "reader-pdf",
    props: {
        path: {
            type:String,
            default: ''
        },
    },
    mounted() {
        
        const _this = this;
        const _doc = document.getElementById("pdfViewerId");
        const pdfViewer = new PDFViewer({
            container: _this.$refs.pdfViewer
        });
        pdfjsLib.getDocument('/static/reader-01.pdf').promise.then(pdf => {
     
            pdfViewer.setDocument(pdf);
            const pageView = new PDFPageView({
                container: _this.$refs.pdfViewer,
                id: 1,
                scale: 1,
                defaultViewport :{}
            });
          
        }).catch(error => {
            console.log(error);
        });
    }
};

以上的坑只是一 pdfjs-dist v2.2.228版本为举例