vue pdfjs

// Vue 组件使用 PDF.js 示例代码

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

<script>
import pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

export default {
  data() {
    return {
      pdfDoc: null,
      pageNum: 1,
      pageRendering: false,
      pageNumPending: null,
      scale: 1.5,
      canvas: null,
      ctx: null
    };
  },
  mounted() {
    this.canvas = this.$refs.pdfCanvas;
    this.ctx = this.canvas.getContext('2d');
    this.loadPdf();
  },
  methods: {
    loadPdf() {
      const url = '/path/to/your/pdf'; // 替换为你的PDF文件路径
      pdfjsLib.getDocument(url).promise.then(pdfDoc_ => {
        this.pdfDoc = pdfDoc_;
        this.renderPage(this.pageNum);
      });
    },
    renderPage(num) {
      this.pageRendering = true;
      this.pdfDoc.getPage(num).then(page => {
        const viewport = page.getViewport({ scale: this.scale });
        this.canvas.height = viewport.height;
        this.canvas.width = viewport.width;

        const renderContext = {
          canvasContext: this.ctx,
          viewport: viewport
        };
        const renderTask = page.render(renderContext);

        renderTask.promise.then(() => {
          this.pageRendering = false;
          if (this.pageNumPending !== null) {
            this.renderPage(this.pageNumPending);
            this.pageNumPending = null;
          }
        });
      });
    }
  }
};
</script>

<style scoped>
canvas {
  border: 1px solid black;
}
</style>

解释说明：

• 模板部分 (<template>)：定义了一个包含 <canvas> 元素的 div，用于渲染 PDF 页面。
• 脚本部分 (<script>)：
  • 引入了 pdfjs-dist 和 pdfjs-worker，并设置了全局 Worker 选项。
  • 定义了一个 Vue 组件，包含加载和渲染 PDF 文件的功能。
  • loadPdf 方法用于加载 PDF 文件，并调用 renderPage 方法渲染第一页。
  • renderPage 方法负责根据指定的页面编号渲染 PDF 页面到 <canvas> 上。
• 样式部分 (<style scoped>)：简单地为 <canvas> 添加了一个黑色边框。

请确保你已经安装了 pdfjs-dist 和 pdfjs-dist/build/pdf.worker.entry，可以通过 npm 或 yarn 安装。