pdf.js pdfViewer浮点数路由错误

Question

我正在使用 pdf.js 的 pdfviewer 类。

当我尝试渲染带有文本层的 pdf 时，它总是报错

必须将 --scale-factor css 变量设置为与

viewport.scale

相同的值，无论是在

container

元素本身还是在 DOM 中的更高位置。

我已经设置了变量。但错误不会消失。所以我设置断点看看发生了什么。

if (
  visibility === "visible" &&
  (!scaleFactor || Math.abs(scaleFactor - viewport.scale) > 1e-15)
) {
  console.error(
    "The `--scale-factor` CSS-variable must be set, " +
      "to the same value as `viewport.scale`, " +
      "either on the `container`-element itself or higher up in the DOM."
  );
}

这是抛出错误的代码。 scaleFactor 为 1.3333，viewport.scale 为 1.3333333333333333。 pdf是4:3的比例。显然，这种精度差异会导致错误。

这是我写的代码

<template>
  <div>
    <div ref="viewerContainer" class="container" style="position: absolute;" :style="{'--scale-factor': scale}" >
      <div ref="pdfViewer"></div>
    </div>
    <button @click="loadPDF">Load PDF</button>
  </div>
</template>

<script>
import { PDFViewer, EventBus } from "pdfjs-dist/web/pdf_viewer";
import * as pdfjsLib from "pdfjs-dist/build/pdf";
pdfjsLib.GlobalWorkerOptions.workerSrc =
  "https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.js";
import { isProxy, toRaw } from 'vue';

export default {
  data() {
    return {
      pdfViewer: null,
      pdfUrl: "./sample.pdf",
      scale: 2,
    };
  },
  mounted() {
    this.initializePDFViewer();
  },
  methods: {
    initializePDFViewer() {
      const container = this.$refs.viewerContainer;
      const viewer = this.$refs.viewer;

      this.pdfViewer = new PDFViewer({
        container: container,
        viewer: viewer,
        eventBus: new EventBus(),
        textLayerMode: 2,
      });
    },
    loadPDF() {
      // Load PDF and render it in the PDFViewer
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
      loadingTask.promise.then((pdfDocument) => {
        if (isProxy(this.pdfViewer)){
          toRaw(this.pdfViewer).setDocument(pdfDocument)
        }
      });
    },
  },
};
</script>

<style scoped>
.pdfViewer {
  width: 100%; /* or specify the desired width */
  height: 100%; /* or specify the desired height */
}
</style>

请告知如何防止此类问题。

我用的pdfjs版本是3.5.141.

Answer 1

https://github.com/mozilla/pdf.js/pull/16256

这是上周的拉取请求。它修复了 3.5.141 中引入的错误，该错误发生在 chromium 浏览器上。

他们合并了拉取请求。但是，新版本尚未发布。

我可以确认这个错误在之前的版本 3.4.120 中不存在。

所以，有三个选项。

1. 先不要使用 pdfViewer，手动渲染它。
2. 恢复到以前的版本，3.4.120.
3. 从源代码编译。