pdf.js PDFViewer浮点数精度误差致CSS变量校验报错求助

问题根源在于PDF.js校验--scale-factor CSS变量与viewport.scale时，采用了1e-15的严格精度阈值。对于4:3比例的PDF，内部计算出的viewport.scale是无限循环小数1.3333333333333333，但你绑定的scale值精度不足（如1.3333），导致校验失败触发报错。

以下是具体解决办法：

方案1：从PDFViewer实例同步获取精确scale值（推荐） #

直接监听PDFViewer的缩放事件，拿到内部计算的精确scale值，再同步更新CSS变量，确保两者完全一致：

修改你的Vue代码，添加缩放事件监听并同步scale值：

<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/pdfjs-dist@3.5.141/build/pdf.worker.min.js";
import { isProxy, toRaw } from 'vue';

export default {
  data() {
    return {
      pdfViewer: null,
      pdfUrl: "./sample.pdf",
      scale: 1, // 初始值设为1，后续由PDFViewer同步
    };
  },
  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,
      });

      // 监听缩放变化，实时同步精确scale值到CSS变量
      this.pdfViewer.eventBus.on("scalechange", (newScale) => {
        this.scale = newScale;
      });
    },
    loadPDF() {
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
      loadingTask.promise.then((pdfDocument) => {
        const rawViewer = isProxy(this.pdfViewer) ? toRaw(this.pdfViewer) : this.pdfViewer;
        rawViewer.setDocument(pdfDocument);
        // 文档加载完成后，手动同步一次当前scale
        this.scale = rawViewer.currentScaleValue;
      });
    },
  },
};
</script>

<style scoped>
.pdfViewer {
  width: 100%;
  height: 100%;
}
</style>

方案2：强制格式化scale值为高精度 #

如果需要手动设置scale，确保传递的数值精度足够，比如使用toPrecision(15)格式化，或者直接使用PDF内部计算的精确值：

例如修改模板中的绑定：

:style="{'--scale-factor': scale.toPrecision(15)}"

但此方法仅适用于固定缩放场景，无法应对PDF自动缩放或用户手动调整缩放的情况，因此优先推荐方案1。

不推荐的方案：修改PDF.js源码阈值 #

不建议修改PDF.js校验逻辑中的精度阈值，这可能会引发其他潜在问题，且后续版本升级时需要重新修改。

内容的提问来源于stack exchange，提问作者Max Luan