vue pdf文件流

你可以使用pdf.js库来在Vue中展示PDF文件流。首先，安装pdf.js库：

npm install pdfjs-dist

然后，创建一个Vue组件来展示PDF文件流：

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

<script>
import pdfjsLib from 'pdfjs-dist'

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

在这个组件中，我们使用pdf.js库来获取PDF文档，并在Canvas中渲染第一页。使用时，只需要传入PDF文件流作为`pdfData`属性即可：

<template>
  <div>
    <PdfRenderer :pdfData="pdfData" />
  </div>
</template>

<script>
import PdfRenderer from '@/components/PdfRenderer'

export default {
  components: {
    PdfRenderer
  },
  data () {
    return {
      pdfData: null
    }
  },
  mounted () {
    this.loadPdfData()
  },
  methods: {
    loadPdfData () {
      // 从服务器获取PDF文件流
      // ...
      this.pdfData = // PDF文件流
    }
  }
}
</script>