Vue+ElementUI使用vue-pdf实现预览功能


Posted in Javascript onNovember 26, 2019

Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下

1、安装 vue-pdf

npm install --save vue-pdf

2、在vue页面中导入对应的组件

我这是通过点击 预览 按钮 获取id打开一个dialog来实现

<!--PDF 预览-->
 <el-dialog :title="PDF 预览"
  :visible.sync="viewVisible" width="80%" center
   @close='closeDialog'>
     <div style="margin-bottom: 15px; text-align: right">
        <el-button type="primary" size="small" @click.stop="previousPage">
           上一页
         </el-button>
         <el-button type="primary" size="small" @click.stop="nextPage">
         下一页
        </el-button>
     <span>当前第{{pdfPage}}页 / 共{{pageCount}}页</span>
    </div>

    <div >
     <pdf
       :src="src"
       :page="pdfPage"
       @num-pages="pageCount = $event"
       @page-loaded="pdfPage = $event"
       style="display: inline-block; width: 100%"
    ></pdf>
  </div>
</el-dialog>
<script>
 import pdf from 'vue-pdf';
 export default {
    components: {
      pdf
    },
    data() {
    return {
    //PDF预览
        viewVisible: false,
        src: null,
        pdfPage : 1,
        pageCount: 0,
  }
 },
 methods:{
  //PDF预览
      previewPDF(row){
        this.src = pdf.createLoadingTask(documentConstants.previewPDFUrl+row.contractId);
        this.src.then(pdf => {
          this.viewVisible = true;
        });
      },

      //关闭窗口初始化PDF页码
      closeDialog(){
        this.pdfPage = 1;
      },

      //PDF改变页数
      previousPage(){
        var p = this.pdfPage
        p = p>1?p-1:this.pageCount
        this.pdfPage = p
      },
      nextPage(){
        var p = this.pdfPage
        p = p<this.pageCount?p+1:1
        this.pdfPage = p
      }
 }
  }
</script>

3、Controller的返回

@RequestMapping(value = "/previewPDF/{contractId}")
  public ResponseEntity<byte[]> previewPDF(@PathVariable Long contractId) throws TException, IOException {
    ContractAttachmentTmpModelDTO model = contractScanManagementRpcService.queryContractAttachmentTmp(contractId);
    HttpHeaders headers = new HttpHeaders();
    headers.setContentDispositionFormData("attachment", model.getAttachmentName());
    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
    return new ResponseEntity<byte[]>(model.getAttachmentData(),
        headers, HttpStatus.OK);
  }

总结:这个是实现一个简单的预览功能。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 #Javascript
vue element-ui读取pdf文件的方法
Nov 26 #Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 #Javascript
jQuery实现轮播图效果
Nov 26 #jQuery
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 #Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 #Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 #Javascript
You might like
php的urlencode()URL编码函数浅析
2011/08/09 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
Python实现子类调用父类的方法
2014/11/10 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
Django配置文件代码说明
2019/12/04 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
pygame实现飞机大战
2020/03/11 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
父亲八十大寿答谢词
2014/01/23 职场文书
保险专业自荐信范文
2014/02/20 职场文书
分公司负责人任命书
2014/06/04 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书