vue在线预览pdf文件流blob

在Vue.js中，要实现在线预览PDF文件流（Blob），通常我们会结合HTML5的`<object>`元素和FileReader API来完成。以下是一个简单的步骤概述：

1. 获取PDF Blob: 当从服务器获取到PDF数据作为Blob对象时，需要将其存储在一个变量中。

async function getPDFBlob(url) {
  const response = await axios.get(url);
  return new Blob([response.data], { type: 'application/pdf' });
}

2. 创建预览组件：创建一个自定义的Vue组件，如`PdfPreview.vue`，在这个组件内部处理预览功能。

<template>
  <div>
    <object :data="pdfUrl" type="application/pdf" width="100%" height="600px">
      您的浏览器不支持PDF查看，请更新浏览器。
    </object>
  </div>
</template>

<script>
export default {
  props: ['pdfData'],
  mounted() {
    this.pdfUrl = URL.createObjectURL(this.pdfData);
  },
  beforeDestroy() {
    URL.revokeObjectURL(this.pdfUrl); // 预防内存泄漏
  }
};
</script>

3. 使用预览组件：在父组件中，传入获取到的PDF Blob给预览组件。

<template>
  <div>
    <PdfPreview :pdf-data="pdfBlobFromServer" />
  </div>
</template>

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

export default {
  components: {
    PdfPreview,
  },
  data() {
    return {
      pdfBlobFromServer: null,
    };
  },
  async created() {
    this.pdfBlobFromServer = await getPDFBlob('your-pdf-url-or-api-endpoint');
  },
};
</script>