如何在 vue cli typescript 项目中使用 pdfjs-dist？

问题描述

我在让 pdfjs-dist 在 vue typescript cli 项目中工作时遇到问题。

• 一旦我尝试使用 pdfjs-dist，我就会收到此错误
• 据我所知，这是我的 vue.config.js 或其他方面的问题。
• 我正在努力超越这一点，并且还没有看到很多关于 vue cli 和 webpack 的例子。人们已经发布了一些 webpack 规则，但我在这些方面没有取得太大进展。

Module parse Failed: Unexpected token (2205:45)
You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         intent: renderingIntent,|         renderInteractiveForms: renderInteractiveForms === true,>         annotationStorage: annotationStorage?.serializable || null
|       });
|     }

示例

• package.json

{
  "scripts": {
    "serve": "vue-cli-service serve","build": "vue-cli-service build","watch": "vue-cli-service build --mode development --watch"
  },"dependencies": {
     "@types/pdfjs-dist": "^2.7.4","pdfjs-dist": "^2.8.335",}

}

• 组件

<template>
  <div class="pdfviewer">
    <canvas id="pdfpage"></canvas>
    <div class="textLayer" id="text-layer"></div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

import * as PDFJS from "pdfjs-dist";

export default Vue.extend({
  name: "PdfViewer",props: { pdfBase64: String },methods: {
    base64ToUint8Array(base64: string) {
      const raw = atob(base64); // convert base 64 string to raw string
      const uint8Array = new Uint8Array(raw.length);
      for (let i = 0; i < raw.length; i++) {
        uint8Array[i] = raw.charCodeAt(i);
      }
      return uint8Array;
    },async getPdf() {
        const container = document.getElementById("pdfpage");
        let pdfData = this.base64ToUint8Array(this.pdfBase64);
        pdfData = pdfData.replace("data:application/pdf;base64,","");
        const loadingTask = PDFJS.getDocument(pdfData);
        loadingTask.promise.then(function(pdf) {
            const pageRetrieved = pdf.getPage(1);
            pageRetrieved.then(function(page) {
                const scale: any = 1;
                const viewport = page.getViewport(scale);
                const canvas = document.getElementById("pdfpage") as HTMLCanvasElement;
                if (canvas) {
                const context = canvas.getContext("2d");
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                page.render({ canvasContext: context as any,viewport: viewport });
                }
            });
        })
    }
  },mounted() {
    // load pdf into canvas
    this.getPdf()
  }
});
</script>

解决方法

似乎我遇到的唯一问题是我使用的当前版本 "pdfjs-dist": "2.0.943" 似乎工作得很好。我现在已将其更改为 2.3.200。这是使用此设置的最新版本。文本对齐也适用于此。

版本说明

• 必须更改 PDFJS.GlobalWorkerOptions.workerSrc ="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/build/pdf.worker.min.js"; 以匹配导入的版本
• 2.0.943 一直到2.3.200
• 2.5.207 不会构建失败，但无法在画布中呈现 pdf
• 2.7.570 之后的构建失败，出现上述错误。我怀疑我需要在 vue.config.js
中进行一些 webpack 更改

我还得加个手表

watch: {
    src: function(newValue: string | null,oldValue: string | null) {
      console.log("src update");
      console.log(`Updating from`);
      console.log(oldValue);
      console.log(`to`);
      console.log(newValue);
      // TODO: if empty clear canvas
      this.getPdf();
    }
  },

文字层

const txtLayer = document.getElementById(
      "text-layer"
) as HTMLDivElement;
txtLayer.style.height = viewport.height + "px";
txtLayer.style.width = viewport.height + "px";
txtLayer.style.top = canvas.offsetTop + "px";
txtLayer.style.left = canvas.offsetLeft + "px";

page.render({
    canvasContext: context as any,viewport: viewport
});

page.getTextContent().then(function(textContent) {
    console.log(textContent);
    PDFJS.renderTextLayer({
      textContent: textContent,container: txtLayer,viewport: viewport
    });
});