vue pdf在线预览

Vue PDF在线预览可以通过使用PDF.js库来实现。PDF.js是一个使用HTML5技术实现的开源PDF阅读器，可以在Web浏览器上实现PDF文件的渲染和查看。以下是实现方法：

1. 安装PDF.js库：

可以通过npm安装：

npm install pdfjs-dist

也可以通过CDN引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js"></script>

2. 创建Vue组件：

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

<script>
import pdfjsLib from 'pdfjs-dist'

export default {
  props: {
    pdfUrl: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.renderPdf()
  },
  methods: {
    async renderPdf() {
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
      const pdf = await loadingTask.promise
      const page = await pdf.getPage(1)

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

      const viewport = page.getViewport({ scale: 1 })
      canvas.height = viewport.height
      canvas.width = viewport.width

      const renderContext = {
        canvasContext,
        viewport
      }
      await page.render(renderContext)
    }
  }
}
</script>

3. 使用Vue组件：

<template>
  <div>
    <pdf-viewer :pdf-url="pdfUrl" />
  </div>
</template>

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

export default {
  components: {
    PdfViewer
  },
  data() {
    return {
      pdfUrl: 'https://example.com/sample.pdf'
    }
  }
}
</script>

在上述代码中，PdfViewer组件接受一个pdfUrl属性作为PDF文件的URL地址，并在mounted生命周期钩子中调用renderPdf方法来渲染PDF文件。renderPdf方法使用pdfjsLib库来加载PDF文件，获取第一页并渲染到canvas元素上。

最后，在父组件中使用PdfViewer组件，并传递pdfUrl属性即可实现PDF在线预览。