Vue中接收二进制文件流实现pdf预览的方法

要在Vue中接收二进制文件流实现pdf预览，需要考虑以下几个步骤：

1. 发送请求获取二进制文件流

首先，需要使用Vue的异步请求库，例如axios，发送获取二进制文件流的请求。请求返回的数据类型是一个arraybuffer，需要注意设置responseType为arraybuffer。

示例代码：

axios.get('http://example.com/file.pdf', { responseType: 'arraybuffer' })
  .then(response => {
    // 处理二进制文件流
  })
  .catch(error => {
    // 错误处理
  })

1. 将二进制文件流转换为Blob对象

接下来，需要将获取到的二进制文件流转换为Blob对象。Blob对象可以用于生成Object URL，方便在网页中预览文件。

示例代码：

const file = new Blob([response.data], { type: 'application/pdf' })

其中，第一个参数是一个Uint8Array类型的数组，是二进制文件流的原始数据，第二个参数是文件类型，例如application/pdf代表PDF文件。

1. 将Blob对象转换为Object URL并在页面中预览文件

最后，需要使用URL.createObjectURL方法将Blob对象转换为Object URL，并将Object URL赋值给一个iframe或者embed标签的src属性，以在页面中预览文件。

示例代码：

const fileUrl = URL.createObjectURL(file)
this.pdfUrl = fileUrl

其中，this.pdfUrl是Vue实例中的一个data属性，在模板中使用它来渲染iframe或者embed标签的src属性。

完整的Vue组件实现代码示例：

<template>
  <div>
    <embed :src="pdfUrl" type="application/pdf" width="100%" height="600px">
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'PdfViewer',
  data() {
    return {
      pdfUrl: null
    }
  },
  mounted() {
    axios.get('http://example.com/file.pdf', { responseType: 'arraybuffer' })
      .then(response => {
        const file = new Blob([response.data], { type: 'application/pdf' })
        const fileUrl = URL.createObjectURL(file)
        this.pdfUrl = fileUrl
      })
      .catch(error => {
        console.error(error)
      })
  }
}
</script>

该组件能够发起GET请求，获取PDF类型文件，生成Object URL，并在页面中预览PDF文件。