帮我封装一个基于vue3+cli查看pdf文件

好的，以下是基于Vue3+CLI的PDF文件查看器组件封装代码：

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

<script>
import pdfjsLib from 'pdfjs-dist'

export default {
  name: 'PdfViewer',
  props: {
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      pdf: null,
      currentPage: 1,
      totalPages: 0
    }
  },
  async mounted() {
    await this.loadPDF()
  },
  methods: {
    async loadPDF() {
      this.pdf = await pdfjsLib.getDocument(this.url).promise
      this.totalPages = this.pdf.numPages
      await this.renderPage()
    },
    async nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
        await this.renderPage()
      }
    },
    async prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
        await this.renderPage()
      }
    },
    async renderPage() {
      const page = await this.pdf.getPage(this.currentPage)
      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 }).promise
    }
  }
}
</script>

这个组件有一个名为url的prop，该prop用于传递PDF文件的URL。组件使用pdf.js库加载和渲染PDF文件。组件内部有三个方法：loadPDF、nextPage和prevPage，用于加载PDF文件、翻页和渲染页面。组件内部有一个canvas元素，用于渲染PDF文件的页面。组件的使用方式如下：

<template>
  <div>
    <PdfViewer url="http://example.com/path/to/pdf/file.pdf" />
  </div>
</template>

<script>
import PdfViewer from '@/components/PdfViewer.vue'

export default {
  components: {
    PdfViewer
  }
}
</script>

这个组件可以根据PDF文件的大小自动调整canvas元素的大小，并支持翻页。你可以根据自己的需求进行修改和扩展。