vue中的blob预览pdf

在Vue中预览PDF文件，你可以使用Blob对象和URL.createObjectURL()方法来实现。下面是一个简单的示例代码：

  <div>
    <button @click="previewPDF">预览PDF</button>
    <iframe :src="pdfUrl" width="100%" height="500px" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: ''
    }
  },
  methods: {
    previewPDF() {
      // 假设你已经获取到了PDF文件的二进制数据
      // 这里假设pdfData是一个Blob对象
      const pdfData = this.getPdfData();

      // 将Blob对象转换成URL
      const pdfUrl = URL.createObjectURL(pdfData);

      // 在iframe中显示PDF
      this.pdfUrl = pdfUrl;
    },
    getPdfData() {
      // 可以使用axios等方式获取PDF文件的二进制数据
      // 这里仅演示一个简单的假数据
      const pdfData = new Blob(['fake pdf data'], { type: 'application/pdf' });
      return pdfData;
    }
  }
}
</script>

在上述示例中，当点击"预览PDF"按钮时，会调用`previewPDF`方法。在该方法中，你需要获取PDF文件的二进制数据并将其转换为Blob对象。然后，使用`URL.createObjectURL()`方法将Blob对象转换成URL，最后将URL赋值给`pdfUrl`变量。在`<iframe>`标签中，通过`src`属性将URL传递给iframe，以实现PDF文件的预览。

请注意，这只是一个简单的示例，你需要根据你的具体情况获取PDF文件的二进制数据。