如何将 pdfjs 与 vue3 和 vite 一起使用？

Question

我正在尝试使用 Vite 将我的 vue2 应用程序转换为 vue3。因为没有 webpack，所以我的 pdfjs 实现失败了。我能够渲染 pdf，但 renderTextLayer 无法正常工作（见下图）。

这是浏览器中的消息：

警告：设置假工人。

警告：fetchStandardFontData：无法获取文件“FoxitSymbol.pfb”，并出现“UnknownErrorException：StandardFontDataFactory 未初始化，请参阅参数useWorkerFetch。”。

警告：fetchStandardFontData：无法获取文件“FoxitDingbats.pfb”，并出现“UnknownErrorException：StandardFontDataFactory 未初始化，请参阅参数useWorkerFetch 。”。

我不太确定如何修复工人。我尝试将工作人员后缀添加到导入中，如此处所示，但出现以下错误，并且它甚至不会渲染 pdf。

错误：设置假工作器失败：“无法将对象转换为原始值”。

不知道为什么 standardFontDataFactory 没有初始化。

• vue：3.2.25
• pdfjs-dist：2.16.105

<script>
  const pdfjs = await import('pdfjs-dist/build/pdf');
  const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry');
  import { renderTextLayer, getDocument } from "pdfjs-dist";
  pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker

  export default {
    async mounted() {
      let that=this
      let loadingTask = getDocument(this.$store.getters.blobURL)
      loadingTask.promise.then((pdf) => {
        for (const pageNumber of [...Array(pdf.numPages).keys()]){
          pdf.getPage(pageNumber+1).then(function(page) {
            var scale = 1.5;
            var viewport = page.getViewport({scale: scale});
            var canvas = document.getElementById(`pdfPage${pageNumber+1}`);
            var context = canvas.getContext('2d');
            canvas.height = viewport.height
            canvas.width = viewport.width

            var renderContext = {
              canvasContext: context,
              viewport: viewport
            };
            var renderTask = page.render(renderContext);
            renderTask.promise.then(function () {
              that.createTextLayer(page,canvas)           
            })
          })
        }

      })

    }
    methods: {
      createTextLayer(page,canvas){
        page.getTextContent().then(content => {
          let textLayerDiv=document.getElementById('textLayer'+page.pageNumber) 
          let rect = canvas.getBoundingClientRect()
          textLayerDiv.style.top=`${rect.top}px`
          let scale = rect.height / page.getViewport(1).height
          let viewport = page.getViewport(scale)
          renderTextLayer({ 
            textContent: content,
            container: textLayerDiv,
            viewport,
            textDivs:[] 
          })
        })  
      },
    }
   }
</script>

Answer 1

我发现问题出在 CSS 范围内。由于该元素稍后渲染，因此未应用作用域 CSS。下面是需要位于无范围样式标签中的导入 CSS。

@import '../../node_modules/pdfjs-dist/web/pdf_viewer.css';