vue中的blob预览pdf

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

1. 首先，你需要在Vue组件中添加一个用于显示PDF的元素，比如使用`<embed>`标签：

<template>
  <div>
    <embed :src="pdfUrl" type="application/pdf" width="100%" height="600px" />
  </div>
</template>

2. 在Vue组件的`data`选项中定义一个用于存储PDF文件的Blob对象的变量：

<script>
export default {
  data() {
    return {
      pdfFile: null, // 存储PDF文件的Blob对象
      pdfUrl: '' // 用于显示PDF的URL
    };
  },
  // ...
}
</script>

3. 当用户选择了一个PDF文件后，你可以将该文件转换为Blob对象，并将其赋值给`pdfFile`变量：

methods: {
  handleFileChange(event) {
    const file = event.target.files[0];
    this.pdfFile = new Blob([file], { type: 'application/pdf' });
  },
  // ...
}

4. 在`pdfFile`变量发生改变时，你可以使用`URL.createObjectURL()`方法为`pdfUrl`变量生成一个临时的URL。这个URL可以用于在`<embed>`标签中显示PDF文件：

watch: {
  pdfFile() {
    if (this.pdfFile) {
      this.pdfUrl = URL.createObjectURL(this.pdfFile);
    }
  }
}

5. 最后，在模板中添加一个用于选择PDF文件的文件输入框，并为其添加一个`change`事件监听器来调用`handleFileChange`方法：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept=".pdf" />
    <embed :src="pdfUrl" type="application/pdf" width="100%" height="600px" />
  </div>
</template>

这样，当用户选择一个PDF文件后，它将在页面上以预览的形式显示出来。

希望这可以帮到你！如有任何问题，请随时提问。