vue3预览pdf

要在Vue 3中预览PDF，你可以使用pdf.js库，该库可以在浏览器中渲染PDF文件。以下是一个简单的Vue 3组件，可用于在页面上预览PDF文件：

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

<script>
import pdfjsLib from 'pdfjs-dist'

export default {
  props: {
    pdfUrl: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.renderPdf()
  },
  methods: {
    async renderPdf() {
      const pdf = await pdfjsLib.getDocument(this.pdfUrl).promise
      const page = await pdf.getPage(1)
      const canvas = this.$refs.canvas
      const context = canvas.getContext('2d')
      const viewport = page.getViewport({ scale: 1 })
      canvas.width = viewport.width
      canvas.height = viewport.height
      await page.render({
        canvasContext: context,
        viewport
      })
    }
  }
}
</script>

在这个组件中，我们使用pdfjsLib加载PDF文件并在canvas中渲染第一页。你可以将此组件作为另一个Vue组件的子组件，将pdfUrl传递给它以渲染不同的PDF文件。