vue3 实现预览pdf的几种方式（vue3-pdf, iframe流展示，vue-office/pdf）

在Vue 3中实现PDF预览，可以使用几种方法：

1. 使用vue3-pdf库：

// 安装vue3-pdf
npm install vue3-pdf
 
// 在组件中使用
<template>
  <div>
    <pdf
      :src="pdfSrc"
    ></pdf>
  </div>
</template>
 
<script>
import pdf from 'vue3-pdf'
 
export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfSrc: 'path/to/your/pdf/file.pdf'
    }
  }
}
</script>

2. 使用iframe流显示：

<template>
  <div>
    <iframe :src="pdfUrl"></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      pdfUrl: 'path/to/your/pdf/file.pdf'
    }
  }
}
</script>

3. 使用vue-office/pdf库预览PDF和Office文件：

// 安装vue-office/pdf
npm install @vue-office/pdf
 
// 在组件中使用
<template>
  <div>
    <PdfViewer :src="pdfSrc" />
  </div>
</template>
 
<script>
import { PdfViewer } from '@vue-office/pdf'
 
export default {
  components: {
    PdfViewer
  },
  data() {
    return {
      pdfSrc: 'path/to/your/pdf/file.pdf'
    }
  }
}
</script>

以上方法可以实现PDF文件的预览，但是要注意的是，对于vue3-pdf和vue-office/pdf，它们都依赖于PDF.js库，因此在使用时需要确保该库已经被加载。而对于iframe方法，它是通过在iframe中嵌入PDF文件来实现预览的，这种方法简单但可能受到跨域限制。