vue2-pdfjs 2.0.943 版本 同屏比对功能

<template>
  <div class="pdf-container">
    <div class="pdf-viewer" ref="viewer1"></div>
    <div class="pdf-viewer" ref="viewer2"></div>
  </div>
</template>

<script>
import * as PDFJS from 'pdfjs-dist';
// 设置 worker 文件的路径
PDFJS.GlobalWorkerOptions.workerSrc = '../js/pdf.worker.js';
import { convertAndCompare } from '@/api/common/mancolage';
export default {
  props: ['obj'],
  data() {
    return {
      // pdfPath1: '', // 第一个 PDF 文件路径
      // pdfPath2: '', // 第二个 PDF 文件路径
      pdfPath1: '', // 第一个 PDF 文件路径
      pdfPath2: '', // 第二个 PDF 文件路径
      pdfDocument1: null,
      pdfDocument2: null,
      scale: 1.3
    };
  },
  created() {
    this.getdata();
  },
  mounted() {
    this.$refs.viewer1.addEventListener('scroll', this.syncScroll);
    this.$refs.viewer2.addEventListener('scroll', this.syncScroll);
  },
  beforeDestroy() {
    this.$refs.viewer1.removeEventListener('scroll', this.syncScroll);
    this.$refs.viewer2.removeEventListener('scroll', this.syncScroll);
  },
  methods: {
    async getdata() {
      let data = {
        firstFile: this.obj.fileurl1,
        secondFile: this.obj.fileurl2
      };
      let res = await convertAndCompare(data);
      this.pdfPath1 = process.env.VUE_APP_BASE_API + res.firstCompareFile;
      this.pdfPath2 = process.env.VUE_APP_BASE_API + res.secondCompareFile;
      this.loadPdf();
    },
    async loadPdf() {
      // 加载 PDF 文档
      this.pdfDocument1 = await PDFJS.getDocument(this.pdfPath1).promise;
      this.pdfDocument2 = await PDFJS.getDocument(this.pdfPath2).promise;

      // 渲染 PDF 页面
      await Promise.all([this.renderPdf(this.pdfDocument1, this.$refs.viewer1), this.renderPdf(this.pdfDocument2, this.$refs.viewer2)]);
    },
    async renderPdf(pdfDocument, viewer) {
      for (let i = 1; i <= pdfDocument.numPages; i++) {
        await this.renderPage(pdfDocument, viewer, i);
      }
    },
    async renderPage(pdfDocument, viewer, pageNum) {
      const page = await pdfDocument.getPage(pageNum);
      const viewport = page.getViewport({ scale: this.scale });

      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.width = viewport.width;
      canvas.height = viewport.height;

      const renderContext = {
        canvasContext: context,
        viewport
      };
      const renderTask = page.render(renderContext);
      await renderTask.promise;

      viewer.appendChild(canvas);
    },
    syncScroll(event) {
      const viewer1 = this.$refs.viewer1;
      const viewer2 = this.$refs.viewer2;

      const scrollTop1 = viewer1.scrollTop;
      const scrollTop2 = viewer2.scrollTop;

      // 同步滚动
      if (Math.abs(scrollTop1 - scrollTop2) > 1) {
        if (Math.abs(scrollTop1 - scrollTop2) > 10) {
          if (event.target === viewer1) {
            viewer2.scrollTop = scrollTop1;
          } else {
            viewer1.scrollTop = scrollTop2;
          }
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.pdf-container {
  display: flex;
  height: 100vh; /* 视口高度 */
}

.pdf-viewer {
  flex: 1;
  overflow-y: scroll; /* 允许垂直滚动 */
  background-color: #f0f0f0; /* 背景色 */
}
</style>