0

我在让 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
|       });
|     }

例子

  • 包.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>
4

1 回答 1

0

似乎是我遇到的唯一问题是我使用的当前版本"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
    });
});
于 2021-07-07T19:54:29.607 回答