直接上代码吧

<div >
<el-button type="success" size="small" @click="isViewPdf20 = true" >按钮</el-button>
</div> <el-dialog
  title="预览文件"
:visible.sync="isViewPdf20"
:before-close="handleClose"
:fullscreen="true"
>
<iframe :src=你要预览pdf的文件的地址 frameborder="0" style="width: 100vw; height: 80vh"></iframe>
</el-dialog>
												

vue、Element 点击按钮以弹窗形式预览pdf文件的更多相关文章

  1. fis3+vue+pdf.js制作预览PDF文件或其他

    人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...

  2. vue+element 点击按钮后 导致 刷新页面 致url中拼接 ? 或者拼接参数

    https://blog.csdn.net/sinat_37255207/article/details/88917162 element 自己的<el-form></el-form ...

  3. vue文件流转换成pdf预览(pdf.js+iframe)

    参考文档:https://www.jianshu.com/p/242525315bf6 PDFJS: https://mozilla.github.io/pdf.js/     支持获取文件流到客户端 ...

  4. vue 如何点击按钮返回上一页

    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...

  5. Vue实现点击按钮进行文件下载(后端Java)

    最近项目中需要实现点击按钮下载文件的需求,前端用的vue,因为文件是各种类型的,比如图片.pdf.word之类的.这里后端是可以返回文件的地址给前端的,但我看了下网上各种五花八门的答案,感觉都不是我想 ...

  6. webapp项目vue框架点击按钮实现微信好友分享,朋友圈分享

    当时做这个这个效果真把人给*了,网上能搜到的基本是微信页面的分享,特征是方法是wx.**开头,不适用于app内.思路都是一样的,先调取服务(这里使用plus的内置方法),再发送分享请求 <tem ...

  7. Vue 中使用 viewerjs进行本地上传预览图片

    https://www.cnblogs.com/shenjp/p/9754171.html 如果图片路径是 接口的返回信息的话,将路径存储在数组中,在this.$nextTick中实例化Viewer: ...

  8. vue前端静态页面Github Pages线上预览实现

    一.前期准备之项目编译 此处记录如何解决vue2.0 打包之后,打开index.html出现空白页的问题,附上@参考地址 打包之前修改三个文件 第一步,找到build文件,在webpack.prod. ...

  9. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

随机推荐

  1. 【一个蒟蒻的挣扎】最小生成树—Kruskal算法

    济南集训第五天的东西,这篇可能有点讲不明白提前抱歉(我把笔记忘到别的地方了 最小生成树 概念:一个有 n 个结点的连通图的生成树是原图的极小连通子图,且包含原图中的所有 n 个结点,并且有保持图连通的 ...

  2. hdu 6601 区间条件极值 - 区间 最大 三角形周长

    题目传送门//res tp hdu 目的 对长度为n的区间,给定q个子区间,求其元素能构成三角形的最大周长.有多组测试. n 1e5 q 1e5 ai [1,1e9] (i∈[1,n]); 数据结构 ...

  3. VUE前后台分离

    VUE前后台分离 配置js环境 jQuery >: cnpm install jquery vue/cli 3 配置jQuery:在vue.config.js中配置(没有,手动项目根目录下新建) ...

  4. charindex函数的用法

    例一: CustomName包含客户的First Name和Last Name,它们之间被一个空格隔开.我们用CHARINDX函数确定两个名字中间空格的位置.通过这个方法,我们可以分析ContactN ...

  5. CentOS7 Python3上安装paramiko

    1. CentOS 7下安装Python3.5 CentOS7默认安装了python2.7.5,要用 Python3需要自己手动安装.注意不要删除python2. 1.1 下载python3源码包 w ...

  6. BZOJ2456-mode题解--一道有趣题

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=2456 瞎扯 这是今天考的模拟赛T2交互题的一个30分部分分,老师在讲题时提到了这题.考 ...

  7. O049、准备 LVM Volume Provider

    参考https://www.cnblogs.com/CloudMan6/p/5597790.html   Cinder 真正负责volume 管理的组件是 volume provider .Cinde ...

  8. opencv3.3.1 + win64 + contrib + cuda 编译

    一 . opencv3.3.1  + win64 + contrib + cuda   编译 1.下载各种依赖 下载安装cuda  https://developer.nvidia.com/cuda- ...

  9. jvm自带的监控机制

    Jdk为我们提供了查看java服务运行时的监控情况 1.如下图所示,打开指定目录下的jconsole.exe应用程序文件. 2.双击后跳出如下界面,可以看到,我们可以监视本地的,也可以监视远程服务.本 ...

  10. 这不是javascript:什么?

    javascript协议.<a href=“javascript:void(0):”>xxx</a>基于事件的事件,例如:<input onblur=“check():” ...