vue中的blob预览pdf

在 Vue 中预览 PDF 文件可以通过使用 Blob 对象和 Object URL 实现。以下是一个简单的示例：

1. 首先，安装 `pdfjs-dist` 包，它是一个用于处理 PDF 文件的 JavaScript 库。可以使用 npm 或 yarn 进行安装：

npm install pdfjs-dist
# 或者
yarn add pdfjs-dist

2. 在 Vue 组件中引入 `pdfjs-dist` 和样式文件：

import pdfjs from 'pdfjs-dist'
import 'pdfjs-dist/web/pdf_viewer.css'

3. 在组件的方法中编写加载和渲染 PDF 的逻辑：

methods: {
  previewPDF(url) {
    // 使用 XMLHttpRequest 获取 PDF 文件的二进制数据
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, true)
    xhr.responseType = 'arraybuffer'

    xhr.onload = () => {
      if (xhr.status === 200) {
        const data = new Uint8Array(xhr.response)
        const blob = new Blob([data], { type: 'application/pdf' })

        // 创建一个 object URL，并将其赋值给 iframe 的 src
        const url = URL.createObjectURL(blob)
        this.pdfSrc = url
      }
    }

    xhr.send()
  }
}

4. 在模板中使用 iframe 元素来显示 PDF 文件：

<template>
  <div>
    <iframe :src="pdfSrc" width="100%" height="500px"></iframe>
  </div>
</template>

5. 调用 `previewPDF` 方法并传入 PDF 文件的 URL，即可在页面上预览 PDF 文件：

this.previewPDF('https://example.com/path/to/pdf.pdf')

注意：上述代码中的 `this.pdfSrc` 是组件的一个数据属性，用于存储生成的 object URL。

这样，你就可以在 Vue 中使用 Blob 对象和 Object URL 预览 PDF 文件了。