vue3 pdf预览

<template>
  <div>
    <embed :src="pdfUrl" type="application/pdf" width="100%" height="600px" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: 'https://example.com/your-pdf-file.pdf' // 替换为你的PDF文件路径
    };
  }
};
</script>

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

解释说明

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

   • 使用了 <embed> 标签来嵌入 PDF 文件。<embed> 是 HTML5 中用于嵌入外部内容（如 PDF、视频等）的标签。
   • :src="pdfUrl" 绑定了 pdfUrl 数据属性，动态设置 PDF 文件的路径。
   • type="application/pdf" 指定嵌入的内容类型为 PDF。
   • width="100%" 和 height="600px" 设置了嵌入内容的宽度和高度。

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

   • 定义了一个 Vue 组件，并在 data 函数中返回一个包含 pdfUrl 的对象。
   • pdfUrl 是 PDF 文件的 URL，你需要将其替换为你自己的 PDF 文件路径。

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

   • 可以根据需要添加样式，这里使用了 scoped 属性确保样式仅应用于当前组件。

如果你有任何其他问题或需要进一步的帮助，请随时告诉我！