embed实现PDF文件预览

关注

原创最新推荐文章于 2026-05-17 12:54:09 发布 2.1k 阅读 AI 写同款· GEO 优化 ›

java pdf如何实现分页返回pdf_如何实现高性能的在线 PDF 预览作者：子木政采云前端团队转发链接：https://mp.weixin.qq.com/s/Wx_gJLrZftJ_dm2phoUf8g引言最近接到产品需求，用户需要在我们可站点上在线查看 PDF 文件，并且查看时，用户可以对 PDF 文件的进行旋转、缩放、跳转到指定页码等操作。这个太简单了，随便找找就一堆轮子。目前常见的在线 PDF 查看方案：使用 iframe、embed、object 标签直接... 阅读详情

需求分析

在线预览

案例

<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>