vue将接收到的 PDF 数据流转换为 Blob 对象 并用vue-pdf展示

Vue.js 可以通过一些插件配合使用来处理 PDF 数据流并将其转换为 Blob 对象，以便在 Vue-PDF 这样的库中显示。首先，你需要安装适合的库，如 `vue-file-reader` 或 `axios` 来获取 PDF 数据，然后可以借助 `pdfjs-dist` 库来解析 PDF。

以下是一个简单的步骤示例：

1. **安装依赖**:
- 使用 npm 安装所需的库：

     npm install axios vue-file-reader pdfjs-dist vue-pdf

2. **创建组件**:

   <template>
     <div>
       <button @click="loadPDF">加载 PDF</button>
       <vue-pdf ref="pdfViewer" :src="blobUrl" />
     </div>
   </template>

   <script>
   import { ref, onMounted } from 'vue';
   import axios from 'axios';
   import { PDFJS } from 'pdfjs-dist';

   export default {
     setup() {
       const blobUrl = ref('');
       const pdfViewer = ref(null);

       // 加载 PDF 功能
       const loadPDF = async () => {
         try {
           // 从服务器或 API 获取 PDF 数据流
           const response = await axios.get('your-pdf-url', {
             responseType: 'arraybuffer',
           });

           // 将数据流转换为 Blob
           const blob = new Blob([response.data], {
             type: 'application/pdf',
           });

           // 解析 PDF 并设置 URL
           PDFJS.getDocument(blob).promise.then(pdfDocument => {
             pdfDocument.promise.then(pdfObject => {
               pdfViewer.value.load(pdfObject);
               blobUrl.value = URL.createObjectURL(blob); // 设置给 vue-pdf 的 src
             });
           });
         } catch (error) {
           console.error('Error loading PDF:', error);
         }
       };

       return {
         blobUrl,
         pdfViewer,
         loadPDF,
       };
     },
   };
   </script>

在这个例子中，当用户点击“加载 PDF”按钮时，会发送一个 GET 请求到指定的 URL 获取 PDF 数据。数据返回后，我们创建一个 Blob 对象，并使用 PDF.js 加载文档。最后，我们将转换后的 URL 设置给 `vue-pdf` 组件。