vue pdf在线预览

Vue PDF在线预览可以通过使用PDF.js库来实现。以下是一个简单的Vue组件示例，它使用PDF.js库和Canvas元素来呈现PDF文件：

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

<script>
import pdfjsLib from 'pdfjs-dist'

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

在使用此组件时，您需要将PDF文件的URL传递给它：

<pdf-preview url="/path/to/your/file.pdf"></pdf-preview>

请注意，此示例中使用的PDF.js版本是4.0.0。您可以通过npm安装它：

npm install pdfjs-dist

请确保在使用此组件之前正确引入PDF.js库。