vue中如何显示pdf文件

在 Vue 中显示 PDF 文件通常有两种方式：

### 1. 使用 iframe 标签

可以在 Vue 模板中使用 iframe 标签来嵌入 PDF 文件：

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

<script>
export default {
  data() {
    return {
      pdfUrl: 'https://example.com/myfile.pdf'
    }
  }
}
</script>

其中，`:src` 绑定了一个 PDF 文件的 URL，通过设置 iframe 的宽度和高度，即可在页面中显示 PDF 文件。

### 2. 使用 PDF.js

PDF.js 是一个开源的 JavaScript PDF 渲染库，可以在浏览器中展示 PDF 文件。

安装 PDF.js：

npm install pdfjs-dist

在 Vue 组件中使用 PDF.js：

<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
import pdfjsLib from 'pdfjs-dist'

export default {
  mounted() {
    // 加载 PDF 文件
    pdfjsLib.getDocument(this.pdfUrl).promise.then(pdf => {
      // 获取第一页
      pdf.getPage(1).then(page => {
        // 渲染页面
        const canvas = this.$refs.canvas
        const context = canvas.getContext('2d')
        const viewport = page.getViewport({ scale: 1.5 })
        canvas.width = viewport.width
        canvas.height = viewport.height
        page.render({ canvasContext: context, viewport })
      })
    })
  },
  data() {
    return {
      pdfUrl: 'https://example.com/myfile.pdf'
    }
  }
}
</script>

其中，使用 `pdfjsLib.getDocument` 加载 PDF 文件，使用 `pdf.getPage` 获取第一页并渲染到 canvas 上。需要注意的是，需要在 mounted 钩子函数中加载 PDF 文件，因为此时 DOM 已经准备就绪。