vue3预览pdf

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

<script>
export default {
  data() {
    return {
      pdfUrl: ''
    };
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    loadPdf() {
      // 假设PDF文件的路径是 'https://example.com/sample.pdf'
      this.pdfUrl = 'https://example.com/sample.pdf';
    }
  }
};
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了一个 <iframe> 元素来加载和预览 PDF 文件。iframe 的 src 属性绑定到组件的 pdfUrl 数据属性。
   • width="100%" 和 height="600px" 设置了 iframe 的尺寸，可以根据实际需求调整。

2. 脚本部分 (<script>):

   • 定义了一个 data 函数返回一个对象，包含 pdfUrl 属性，用于存储 PDF 文件的 URL。
   • 在 mounted 生命周期钩子中调用 loadPdf 方法，确保在组件挂载后加载 PDF 文件。
   • loadPdf 方法设置 pdfUrl 为 PDF 文件的实际 URL。

3. 样式部分 (<style scoped>):

   • 可以根据需要添加自定义样式，这里没有特别的样式要求，所以保持为空。

注意事项：

• 确保 PDF 文件的 URL 是有效的，并且可以在浏览器中直接访问。
• 如果需要更复杂的 PDF 预览功能（如缩放、翻页等），可以考虑使用专门的 PDF 库，例如 pdf.js 或者 vue-pdf 组件库。