vue在线预览pdf文件

你可以使用pdf.js来在Vue应用程序中预览PDF文件。pdf.js是一个开源的JavaScript库，可在Web浏览器中显示PDF文档。

以下是一个简单的Vue组件，使用pdf.js来预览PDF文件：

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

<script>
import pdfjsLib from 'pdfjs-dist'

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

在这个组件中，我们首先引入了pdfjsLib库，然后在mounted钩子中调用renderPdf方法来渲染PDF文件。在renderPdf方法中，我们首先通过pdfjsLib.getDocument方法获取PDF文档对象，然后通过getPage方法获取第一页的页面对象，并使用getViewport方法获取页面的视口对象。接下来，我们使用canvas元素来呈现PDF页面，并使用page.render方法将页面呈现到canvas上。

你可以像这样在其他Vue组件中使用这个组件：

<template>
  <div>
    <PdfViewer url="your-pdf-url"></PdfViewer>
  </div>
</template>

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

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

这个组件可以在浏览器中预览PDF文件，但是在生产环境中，你需要将pdf.js和pdf.worker.js文件放到你的web服务器上，并通过script标签加载它们。