vue预览pdf文件流

你可以使用`pdf.js`库来在Vue中预览PDF文件流。首先，你需要安装`pdf.js`库：

npm install pdfjs-dist

然后，在Vue组件中引入`pdf.js`库并创建一个方法来加载和预览PDF文件流：

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

<script>
import pdfjsLib from 'pdfjs-dist'

export default {
  mounted() {
    this.loadAndPreviewPDF()
  },
  methods: {
    async loadAndPreviewPDF() {
      const url = 'http://example.com/path/to/your/pdf/file.pdf' // 替换为你的PDF文件流URL
      
      const loadingTask = pdfjsLib.getDocument(url)
      const pdf = await loadingTask.promise

      const pageNumber = 1 // 想要预览的页面号码
      const page = await pdf.getPage(pageNumber)

      const canvas = this.$refs.pdfViewer // 获取canvas元素
      const context = canvas.getContext('2d')

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

      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }

      await page.render(renderContext)
    }
  }
}
</script>

上述代码中，首先我们通过`pdfjsLib.getDocument(url)`加载PDF文件流。然后，我们选择要预览的页面，并将其渲染到Canvas上进行预览。

请注意，你需要将`http://example.com/path/to/your/pdf/file.pdf`替换为你的实际PDF文件流的URL。

这样，你就可以在Vue中预览PDF文件流了。希望对你有帮助！