vue中的blob预览pdf

在Vue中预览PDF文件可以使用Blob对象。以下是一个示例代码：

<template>
  <div>
    <button @click="previewPDF">预览PDF</button>
    <embed :src="pdfUrl" type="application/pdf" width="100%" height="600px"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: ''
    };
  },
  methods: {
    previewPDF() {
      // 发起请求获取PDF文件的二进制数据
      axios.get('/api/getPdf', { responseType: 'blob' })
        .then(response => {
          // 创建Blob对象
          const blob = new Blob([response.data], { type: 'application/pdf' });
          // 生成URL
          this.pdfUrl = URL.createObjectURL(blob);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

在上述代码中，我们在模板中使用了一个按钮来触发`previewPDF`方法。在该方法中，我们使用axios库发送GET请求以获取PDF文件的二进制数据，并将`responseType`设置为`blob`以获取Blob对象。然后，我们将该Blob对象转换为URL，并将其赋值给`pdfUrl`变量，以便在`embed`标签中预览PDF文件。

请确保安装了axios库，并根据实际情况更改API地址和路由。