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 相关文章推荐
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
学习ExtJS table布局
Oct 08 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
JS轮播图的实现方法2
Aug 25 Javascript
原生JavaScript实现五子棋游戏
Nov 09 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
详解小程序如何动态绑定点击的执行方法
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
sql注入与转义的php函数代码
2013/06/17 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
webpack多页面开发实践
2017/12/18 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Python编码爬坑指南(必看)
2016/06/10 Python
Python如何判断数独是否合法
2016/09/08 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
python 调用c语言函数的方法
2017/09/29 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
微型企业创业投资计划书
2014/01/10 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
我爱我校演讲稿
2014/05/21 职场文书
英语邀请函范文
2015/02/02 职场文书
廉洁自律证明
2015/06/24 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
MySQL多表查询机制
2022/03/17 MySQL