vue-pdf展示pdf

LinMeng 等级 689 0 0
标签: pdf前端

使用vue-pdf插件展示pdf文档

<template>
  <div class="citicBankDoc">
     <el-dialog
     :show-confirm-button="false" 
      :visible.sync="showCiticDialog"
      :show-close="false"
     > 
     <div class="iframe_con">
      <div class='mask'>
        <pdf  v-for="i in totalPage" :key="i"  :src="loadingTask" :page="i"></pdf>     
        <div class="btns" v-if='showDialogButton'>
        <el-button type="primary" @click="handleCiticBankDialog" size="small">确认</el-button>
      </div>
      </div>
    </div>
   </el-dialog>
  </div>
</template>

<script>
import pdf from 'vue-pdf';
export default {
  name: 'citicBankDocPage',
  props: ['showCiticDialog'], 
  data () {
    return {
      showDialogButton: false,
      totalPage: null,
      loadingTask: ''
    };
  },
  mounted () {
    var loadingTask = pdf.createLoadingTask(window.common.$store.getters.getCiticPolicyUrl);
    console.log(loadingTask, 'l');
    loadingTask.promise.then(pdf => {
      this.loadingTask = loadingTask;
      this.totalPage = pdf.numPages;
    }).catch((err) => {
      console.log(err, '加载失败');
    });
    this.handleSureButton();
  },
  components: {
    pdf
  },
  watch: {
  },
  compuetd: {
  },
  beforeDestory () {

  },
  methods: {
    //  处理中信银行弹窗按钮先显示
    handleSureButton () {
      var that = this;
      window.setTimeout(()=>{
        that.showDialogButton = true;
      }, 2000);
    },
    // 控制中信银行的弹窗,关闭操作在父页面
    handleCiticBankDialog () {
      this.$emit('handleCiticDialogClose');
    }
  }
};
</script>

<style lang="less"  scoped>
.citicBankDoc{
   ::v-deep.el-dialog{
     margin-top:3vh!important;
    height: 90%;
    width:70%;
    overflow-y: auto;
     .btns{
      text-align:center!important;
      button{
       margin-right: 15px;
       margin-bottom:15px;
      }
    }

  }
    ::v-deep.el-dialog__body{
    position:relative!important;
    height: 90%!important;
  }
    .pdf-iframe{
    width: 100%;
    height: 100%;
    overflow-y:auto
}
}
</style>
收藏
评论区

相关推荐

vue-pdf展示pdf
使用vuepdf插件展示pdf文档 <template <div class"citicBankDoc" <eldialog :showconfirmbutton"false" :visible.sync"showCiticDialog" :showclose"false"
【Golang】Go入门及进阶书籍推荐
Go入门教程全集 链接: https://pan.baidu.com/s/1mWD7DpRa56WXi7WmNaohOg(https://pan.baidu.com/s/1mWD7DpRa56WXi7WmNaohOg) 提取码: ki1e Cloud.Native.Go.pdf C和指针.pdf C面向对象多线程编程.pdf Design Patt
「Vue — 插件」PDF预览vue-pdf
样式如图:1:npm install save vuepdf2:在需要使用的页面中 js<div class"page"{{currentPage}}/{{pageCount}}</div<div class"pdf" <span @click"changePdfPage(0)" class"arrow" :class"{g
Java根据PDF中的关键字位置判定PDF文件是否合法
业务中需判定PDF文件是否为指定PDF文件,如果不是则不允许上传,并且提醒用户上传合法PDF文件 此贴需要参考我的上上篇帖子,定位PDF中关键字的位置 测试结果: ![](https://oscimg.oschina.net/oscnet/1f592e4145eed4c1c1c756e2b3e05acfd5c.png) maven配置 <!
java word导出pdf
整体思路就是: 使用word模板引擎,将占位符(格式:{{title}})替换为查询出来的数据,再将替换完成的word转换为pdf ![](https://oscimg.oschina.net/oscnet/76ac1bc3da6d1cec6f1c2f9406c8e07a768.jpg) doc转pdf源码: https://gitee.com/java
P2P技术揭秘.P2P网络技术原理与典型系统开发
Modular.Java(2009.06)\].Craig.Walls.文字版.pdf: [http://www.t00y.com/file/59501950](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.t00y.com%2Ffile%2F59501950) \[More.E
PDF文件可以修改背景颜色吗
  最近有些小伙伴问我,PDF文件可以修改背景颜色吗?如果可以,该怎么修改呢?小伍今天就借着这篇文章就是给大家详细介绍PDF文件修改背景颜色的方法。   1、首先,我们下载最新版的迅捷PDF编辑器。   ![](https://oscimg.oschina.net/oscnet/09d9cdde1083b9ac76d8d2d6647e45bb8db.jp
PDF文件在电脑上如何进行编辑
PDF文件是比较常见的文件保存格式,因为PDF文件的保存格式受到很多人的欢迎。它的文件真实性很高,但是电脑上很少有软件来打开PDF文件,更何况是打开PDF文件来进行对文件的编辑。 PDF编辑软件下载[http://bianji.xjpdf.com/](https://www.oschina.net/action/GoToLink?url=http%3A%2
PDF文件在线转换成PPT
  有多少人做过PDF文件的转换,还是PDF在线转换成PPT的转换,不用说转换成PPT了,连最基本的转换都没有做过吧。PDF文件支持多种文件之间的转换,如果你连PDF怎么转换成别的文件你都不了解,你的领导或者上司会满意你的工作效率吗?其实PDF在线转换成其他格式的文件很简单,转换成PPT文件也不难,需要用到一款在线转换器——迅捷PDF在线转换器。这种在线转换
PDF编辑器加入超链接怎么操作
想要在网站上下载的PDF文件中添加一些超链的话,该如何去操作呢?想要知道一个轻快省事,又不会耽误太多时间的办法吗?那就和我一起来看一下吧! 迅捷PDF编辑器。这款迅捷PDF编辑器能给用户提供完整的PDF编辑功能,不单只能够对PDF文件当中的文本部分进行修改,更可以针对图像、样式、多媒体内容进行编辑。用户可以在任何PDF文件页面当中,随意修改、删除或者插入页
PDF编辑软件哪个好 如何给PDF文件添加页眉页脚
      上班都要用文件的,WPS文件,PDF文件,有些页面是不好看的,[PDF编辑软件](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fbianji.xjpdf.com%2F)哪个好,如何给PDF文件添加页眉页脚?很多人不知道呢,下面简单分享下方法。 1、要在百度打开工具迅捷PDF编辑
PDF编辑软件如何编辑PDF文件
PDF文件是一种会忠实地再现原稿的每一个字符、颜色以及图象,可保证精确的颜色和准确的打印效果的文件格式。pdf目的是为了支持跨平台上的,多媒体集成的信息出版和发布,尤其是提供对网络信息发布的支持。 ![](http://5b0988e595225.cdn.sohucs.com/images/20171221/f1dbdcd5830d430ba45f783a
Mac上在PDF文件中插入新的空白页面也是蛮简单的
Mac上在PDF文件中插入新的空白页面也是蛮简单的,只需要[PDF Expert for Mac](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.pdfexpert.cc%2F)就可以了。 那么在PDF Expert for Mac中怎么往PDF文档中插入新页面呢?具体如何操作呢?
SpringBoot 下PDF生成使用填坑总结
* * * **一、PDF生成** =========== * * * === 由于直接使用IText生成PDF,数据填充较为繁琐,故: 选用Freemarker和IText生成pdf,引入依赖: 环境:jdk 1.8 + SpringBoot ### **1.****引入****freemarker starter (****版本跟随
Vue PDF文件预览vue
   最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,GitHub地址:https://github.com/FranckFreiburger/vue-pdf#readme 不过一般GitHub上的注释比较简洁,所以这里把自己实际使用的过程总结了