vue3。pdf 返回二进制流 前端这么展示

Vue 3是Vue.js的最新主要版本，它是渐进式的JavaScript框架，用于构建用户界面。在Vue 3中，如果你需要处理后端返回的PDF文件作为二进制流，并在前端展示，你可以使用以下步骤来实现：

1. 使用`axios`或`fetch`等HTTP客户端库从后端获取PDF文件的二进制流。通常，后端会通过设置响应头`Content-Type: application/pdf`来告知前端内容类型。

2. 在Vue组件中，你需要创建一个链接元素（`<a>`标签），并设置`href`属性为PDF二进制流的URL或者使用`Blob`对象直接在`href`属性中创建一个下载链接。

3. 为了在前端直接展示PDF文件，你可以使用`<iframe>`标签或者`<embed>`标签，并将PDF文件设置为其`src`属性值。

下面是一个示例代码：

<template>
  <div>
    <!-- 如果你有一个直接的URL，可以这样做 -->
    <iframe :src="pdfUrl" style="width: 100%; height: 500px;"></iframe>

    <!-- 如果你有二进制数据，可以使用Blob和URL.createObjectURL -->
    <iframe :src="pdfBlobUrl" style="width: 100%; height: 500px;"></iframe>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      pdfUrl: '', // PDF的URL
      pdfBlobUrl: '', // PDF的Blob URL
    };
  },
  mounted() {
    axios.get('your-pdf-stream-url', {
      responseType: 'blob', // 告诉axios我们将获取二进制流
    }).then((response) => {
      // 创建一个Blob URL作为pdfBlobUrl的值
      this.pdfBlobUrl = URL.createObjectURL(response.data);
      // 设置pdfUrl为后端提供的直接URL
      this.pdfUrl = 'your-pdf-direct-url';
    }).catch((error) => {
      console.error('There was an error!', error);
    });
  },
  beforeDestroy() {
    // 清理创建的Blob URL，避免内存泄漏
    URL.revokeObjectURL(this.pdfBlobUrl);
  }
};
</script>

在上面的代码中，`your-pdf-stream-url`是后端提供的获取PDF二进制流的URL，而`your-pdf-direct-url`是PDF文件的直接访问URL（如果有的话）。`axios.get`方法中的`responseType: 'blob'`是告诉axios我们预期响应是二进制流。