vue pdf文件流 转预览pdf

在Vue中预览PDF文件，可以使用pdf.js库。下面是一个使用文件流的示例：

1. 安装pdf.js库

使用npm安装pdf.js库：

npm install pdfjs-dist --save

2. 创建Vue组件

创建一个Vue组件，用于显示PDF文件：

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

<script>
import pdfjsLib from 'pdfjs-dist'

export default {
  props: {
    pdfFile: {
      type: Blob,
      required: true
    }
  },
  mounted() {
    this.showPdf()
  },
  methods: {
    async showPdf() {
      const pdfData = await this.loadPdfData()
      const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise
      const canvas = document.createElement('canvas')
      const canvasContext = canvas.getContext('2d')
      const viewport = pdf.getPage(1).getViewport({ scale: 1.5 })
      canvas.height = viewport.height
      canvas.width = viewport.width
      await pdf.getPage(1).render({ canvasContext, viewport }).promise
      this.$refs.pdfViewer.appendChild(canvas)
    },
    async loadPdfData() {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsArrayBuffer(this.pdfFile)
        reader.onload = () => resolve(reader.result)
        reader.onerror = error => reject(error)
      })
    }
  }
}
</script>

在上面的代码中，我们使用了pdf.js库来加载PDF文件并将其渲染到画布上。我们使用FileReader来读取文件流，并将其转换为ArrayBuffer，然后将其传递给pdf.js库。

3. 在父组件中使用PDF预览组件

我们可以在父组件中使用我们创建的PDF预览组件：

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

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

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

在上面的代码中，我们使用文件选择器来选择PDF文件。一旦选择了文件，我们将其传递给PDF预览组件，以便预览PDF文件。

这就是使用Vue预览PDF文件流的方式。需要注意的是，pdf.js库支持大多数现代浏览器，但在某些旧浏览器上可能会出现问题。