今天记录一下管理系统中预览pdf的方法

在管理系统中，有很多需要预览文件的操作，既方便用户查看又可以不用打开新的页面，我发现一个不错的方法，记录一下

<el-dialog title="" :visible.sync="dialogVisibleFdf" width="1000px" top="0">
      <iframe
        :src="iframeUrl"
        style="height: calc(100vh - 97px);width:100%; frameborder=no"
        frameborder="no"
        border="0"
        marginWidth="0"
        marginHeight="0"
        scrolling="yes"
      >
      </iframe>
    </el-dialog>

配合element的弹窗嵌套iframe的使用

注释：　

dialogVisibleFdf：打开弹窗的布尔值

iframeUrl：文件的线上地址

高度可以配合自己的业务进行适当的调整

 

 打开的样子大概是这个样子，看起来简便一点