vue-pdf展示pdf

LinMeng 等级 391 0 0

使用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>
收藏
评论区

相关推荐

设计模式PDF下载了4.0万本!那,再肝一本《Java面经手册》吧!
作者:小傅哥 博客:https://bugstack.cn(https://bugstack.cn) 沉淀、分享、成长,让自己和他人都能有所收获!😄 一
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
zip压缩包——加密破解篇
写在前面 前几天在某个 CTF 的交流群想看看大佬们都在聊什么,偶然间看到有人发了一个 pdf (就是这篇文章),一开始顺手点下载下来没怎么看,过几天打开看了一下发现写得挺好的,这篇文章应该是一个大佬的博客里的文章,但是尝试去找到大佬的博客地址却一直没有找到,很遗憾 QAQ 伪加密、爆破、明文攻击和CRC32碰撞+ zip 文件格式: zip 文件由三部分
教你两招,轻松搞定html页面导出为pdf文件
Hi,大家好,我是麦洛,最近项目中遇到了将html页面导出为pdf文件,现在将相关内容分享出来,希望帮到有需要的伙伴 需求场景在招投标软件中,每个标段结束评标之后,都会生成评标报告评标报告主要包含项目信息,标段信息,投标人信息,投标人报价,评标专家打分等情况,相对来说信息量还是比较大,假如我们要导出评标报告该如何做? html页面直接导出为pdf 后端组装页
Python初学者必备书籍《Python入门经典》高清PDF版|百度网盘免费下载|Python初学者,自学Python必读
提取码:1028以及前文提到的学习路线图内容简介Python是一种解释型、面向对象、动态数据类型的高级程序设计语言。Python可以用于很多的领域,从科学计算到游戏开发。《Python入门经典》是面向Python初学者的学习指南,详细介绍了Python编程基础,以及一些高级概念,如面向对象编程。全书分为24章。第1章介绍了Python的背景和安装方法。第2章
PDF文件转化成mobi格式,亲测kindle或者iReader可用!
点击连接,然后选择要转换的文件比如我的是MySQL电子书书,选择输入文件和输出文件的格式,转换,对了记得输入邮箱号码,转化完毕会发送连接到邮箱提供下载。或者,网络流畅的情况下不用输入邮箱号码,转化完毕会自动重定向到下载页面。
markdwon常用语法
什么是markdwon?Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。Markdown 编写的文档后缀为 .md, .markdow
全靠这份Android知识点PDF大全,月薪30K
第一阶段:Android 基础知识回顾: 回顾Android 开发编程,深入理解Android系统原理和层次结构,深入分析Handler源码和原理; 回顾Java,C/C++,Kotlin、dart 在Android开发中必用的语言,熟悉一下几种语言混淆后的特性; 回顾Android IPC和JNI的底层原理和热更新技术回顾Native开发要点,使用C++结