vue如何使用文件流预览pdf

要在Vue中使用文件流预览PDF，可以使用PDF.js库。该库允许我们在浏览器中渲染PDF，同时可以读取文件流。以下是一个简单的示例：

1. 安装PDF.js库

使用npm或yarn安装pdfjs-dist：

npm install pdfjs-dist

2. 创建一个Vue组件

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

<script>
import pdfjsLib from 'pdfjs-dist'

export default {
  props: {
    file: {
      type: File,
      required: true
    }
  },
  mounted () {
    this.renderPdf()
  },
  methods: {
    renderPdf () {
      const canvas = this.$refs.canvas
      const context = canvas.getContext('2d')

      // 将文件流转换为ArrayBuffer
      const fileReader = new FileReader()
      fileReader.onload = () => {
        const arrayBuffer = fileReader.result

        // 通过PDF.js渲染PDF
        pdfjsLib.getDocument({ data: arrayBuffer }).promise.then(pdf => {
          pdf.getPage(1).then(page => {
            const viewport = page.getViewport({ scale: 1 })
            canvas.height = viewport.height
            canvas.width = viewport.width

            page.render({
              canvasContext: context,
              viewport
            })
          })
        })
      }
      fileReader.readAsArrayBuffer(this.file)
    }
  }
}
</script>

在这个组件中，我们使用canvas元素来渲染PDF。mounted钩子会在组件挂载后调用renderPdf方法，该方法会将文件流转换为ArrayBuffer，然后使用PDF.js渲染PDF。我们通过调用getPage方法获取PDF的第一页，然后将它渲染到canvas上。

3. 在父组件中使用该组件

<template>
  <div>
    <input type="file" @change="onFileSelected">
    <PdfPreview v-if="file" :file="file"></PdfPreview>
  </div>
</template>

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

export default {
  components: {
    PdfPreview
  },
  data () {
    return {
      file: null
    }
  },
  methods: {
    onFileSelected (event) {
      this.file = event.target.files[0]
    }
  }
}
</script>

在父组件中，我们使用一个文件输入框来选择PDF文件。当用户选择文件后，我们将文件传递给PdfPreview组件进行渲染。如果没有选择文件，我们不会渲染PdfPreview组件。

这是一个简单的示例，你可以根据自己的需求进行修改。