embed实现PDF文件预览

最新推荐文章于 2025-10-31 20:36:53 发布

原创最新推荐文章于 2025-10-31 20:36:53 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #elementui #vue

实习记录同时被 2 个专栏收录

8 篇文章

订阅专栏

前端开发

7 篇文章

订阅专栏

本文档介绍如何在网页中实现PDF文档的在线预览功能，通过使用Element UI的el-dialog组件，并展示如何设置嵌入PDF的HTML代码。方法包括点击按钮触发预览和关闭对话框的操作。

需求分析

在线预览

案例

<template>
 <div  >
   <el-button type="primary" @click="readOnLine">预览文档</el-button>
    <el-dialog
        :visible="showPdf === true"
        :append-to-body='true'
        :modal-append-to-body='true'
        :lock-scroll='true'
        :destroy-on-close='true'
        :close-on-click-modal='false'
        :width="'80%'"
        class="dialog-div-pre-style"
        :before-close="closePreviewClick"
        top="200px"
        center>
      <div v-if="showPdf === true" class="dialog-body-content-base-style"
           style="justify-content: center; align-items: center">
        <embed :src="pdfUrl" style="width: 100%; height: 800px"/>
      </div>
    </el-dialog>
  </div>
 
</template>
<script>
export default {
 
  data() {
    return {
      showPdf: false,
      pdfUrl: ``, // PDF文档url
    }
  },
  methods: {
 
    readOnLine( ) {
      this.showPdf = true
    },
    closePreviewClick() {
      this.showPdf = false
    }
  },

}
 
</script>
<style scoped>

 
 
</style>