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

Question

我在让 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>

Answer 1

似乎我遇到的唯一问题是我使用的当前版本"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 onward 无法构建上面提到的错误。我怀疑我需要在 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
    });
});