Vue.js PDF 预览组件：快速集成 PDF 预览功能

<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>
<script>
import pdfjsLib from 'pdfjs-dist'

export default {
  name: 'PDFPreview',
  props: {
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      pdfDoc: null,
      pageNum: 1,
      pageRendering: false,
      pageNumPending: null,
      scale: 1.5
    }
  },
  mounted() {
    this.renderPage()
  },
  methods: {
    async renderPage() {
      if (!this.pdfDoc) {
        this.pdfDoc = await pdfjsLib.getDocument(this.url).promise
      }

      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')

      const page = await this.pdfDoc.getPage(this.pageNum)
      const viewport = page.getViewport({ scale: this.scale })

      canvas.height = viewport.height
      canvas.width = viewport.width

      const renderContext = {
        canvasContext: ctx,
        viewport: viewport
      }

      this.pageRendering = true
      const renderTask = page.render(renderContext)

      renderTask.promise.then(() => {
        this.pageRendering = false
        if (this.pageNumPending !== null) {
          this.pageNum = this.pageNumPending
          this.pageNumPending = null
          this.renderPage()
        }
      })
    },
    queueRenderPage(num) {
      if (this.pageRendering) {
        this.pageNumPending = num
      } else {
        this.pageNum = num
        this.renderPage()
      }
    },
    onPrevPage() {
      if (this.pageNum <= 1) {
        return
      }
      this.pageNum--
      this.queueRenderPage(this.pageNum)
    },
    onNextPage() {
      if (this.pageNum >= this.pdfDoc.numPages) {
        return
      }
      this.pageNum++
      this.queueRenderPage(this.pageNum)
    }
  }
}
</script>
<style scoped>
canvas {
  display: block;
  margin: auto;
}
</style>
<p>使用方法：</p>
<pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;PDFPreview url=&quot;path/to/pdf/file.pdf&quot;&gt;&lt;/PDFPreview&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import PDFPreview from './PDFPreview.vue'

export default {
  name: 'App',
  components: {
    PDFPreview
  }
}
&lt;/script&gt;
</code></pre>
<p>其中，PDFPreview组件接收一个url属性，表示要预览的PDF文件的路径。组件会自动渲染第一页，并提供上一页和下一页的功能。</p>
<p>注意：pdf.js需要通过npm安装并引入，否则无法运行。</p>