Vue文档预览的几种方式

Vue文档预览可以通过几种方式实现，以下是几种常见的方法：

1. 使用iframe：

<iframe :src="pdfUrl"></iframe>

2. 使用vue-pdf插件：

   首先安装vue-pdf插件：

npm install vue-pdf

然后在组件中使用：

<template>
  <div>
    <pdf
      :src="pdfUrl"
    ></pdf>
  </div>
</template>
 
<script>
import pdf from 'vue-pdf'
 
export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfUrl: 'path/to/your/document.pdf'
    }
  }
}
</script>

3. 使用Google Docs Viewer：

<iframe :src="`https://docs.google.com/gview?url=${pdfUrl}&embedded=true`"></iframe>

4. 使用Embed.js：

   首先安装Embed.js：

npm install @tiptap/embed-iframe

然后在组件中使用：

<template>
  <div>
    <embed-iframe :src="pdfUrl"></embed-iframe>
  </div>
</template>
 
<script>
import { Embed } from '@tiptap/embed-iframe'
 
export default {
  components: {
    EmbedIframe: Embed
  },
  data() {
    return {
      pdfUrl: 'path/to/your/document.pdf'
    }
  }
}
</script>

选择合适的方法根据你的具体需求进行文档预览。