Vue 3 PDF 预览：使用 pdf.js 库实现

<template>
  <div>
    <embed :src="pdfUrl" type="application/pdf" width="100%" height="600px" />
  </div>
</template>
<script>
import pdfjsLib from 'pdfjs-dist'

export default {
  data() {
    return {
      pdfUrl: 'https://example.com/sample.pdf'
    }
  },
  mounted() {
    this.loadPdf()
  },
  methods: {
    async loadPdf() {
      const pdf = await pdfjsLib.getDocument(this.pdfUrl).promise
      const page = await pdf.getPage(1)
      const viewport = page.getViewport({ scale: 1.5 })
      const canvas = document.createElement('canvas')
      const canvasContext = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width
      const renderContext = {
        canvasContext,
        viewport
      }
      await page.render(renderContext).promise
      const pdfDataUri = canvas.toDataURL('image/png')
      this.pdfUrl = pdfDataUri
    }
  }
}
</script>
<p>在上面的代码中，我们首先导入 pdf.js 库。在 mounted() 挂载钩子中，我们调用 loadPdf() 方法来加载 PDF 文件。在 loadPdf() 方法中，我们首先使用 pdfjsLib.getDocument() 方法来获取 PDF 文件。然后，我们使用 getPage() 方法来获取第一页。接下来，我们使用 getViewport() 方法来获取页面的视口，并使用 HTML5 Canvas 来创建一个画布，然后使用 render() 方法将页面渲染到画布上。最后，我们将渲染后的画布转换为数据 URL，并将其设置为 pdfUrl 属性，以便在模板中显示 PDF 文件。</p>