vue中使用vue-pdf的方法详解


Posted in Javascript onSeptember 05, 2020

需求:简单说~~有两个pdf文件需在h5上展示,通过点击按钮切换不同文件的显示

注:

1.vue-pdf默认展示首页,我这里的需求是通过滑动展示所有页面,这里使用的v-for遍历。有多少页就加载了多少个pdf组件。

2.pdf文件存在跨域问题,这个需要后端同学支持。

3.demo上的pdf文件只有一页,测试多页展示,自己改用多页pdf文件即可

<template>
 <div class="pdf_wrap">
  <div class="pdf_list">
   <!-- src:pdf地址,page: 当前显示页 -->
   <pdf v-for="i in numPages" :key="i" :src="src" :page="i" style="width: 100%" > </pdf>
  </div>
  <Button type="info" @click="loadPdf(pdfUrl1)">
   文件1
  </Button>
   <Button type="info" native-type="submit" @click="loadPdf(pdfUrl2)">
   文件2
  </Button>
 </div>
</template>
 
<script>
import pdf from 'vue-pdf'
import { Button } from 'vant'
export default {
 components: {
  pdf, Button
 },
 data () {
  return {
   src: '',
   numPages: undefined,
   pdfUrl1: 'https://clinic-trial-attachments.oss-cn-beijing.aliyuncs.com/output/demo.pdf/1.pdf',
   pdfUrl2: 'https://clinic-trial-attachments.oss-cn-beijing.aliyuncs.com/output/123demo'
  }
 },
 mounted () {
  this.loadPdf(this.pdfUrl1)
 },
 methods: {
  loadPdf (url) {
   this.src = pdf.createLoadingTask(url)
   this.src.promise.then(pdf => {
    this.numPages = pdf.numPages // 这里拿到当前pdf总页数
   })
  }
 }
}
</script>
<style scoped>
 .pdf_wrap {
  background: #fff;
  height: 100vh
 }
 .pdf_list {
  height: 80vh;
  overflow: scroll;
 }
 button {
  margin-bottom: 20px;
 }
</style>

总结

到此这篇关于vue中使用vue-pdf的方法详解的文章就介绍到这了,更多相关vue使用vue-pdf内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
微信小程序实现聊天室
Aug 21 Javascript
在Vue中使用HOC模式的实现
Aug 23 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 #Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 #Javascript
js实现可爱的气泡特效
Sep 05 #Javascript
js实现点击按钮随机生成背景颜色
Sep 05 #Javascript
javascript实现一款好看的秒表计时器
Sep 05 #Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 #Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 #Javascript
You might like
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
Vue路由前后端设计总结
2019/08/06 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
Python 中的with关键字使用详解
2016/09/11 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
python3 线性回归验证方法
2019/07/09 Python
Python识别html主要文本框过程解析
2020/02/18 Python
vscode调试django项目的方法
2020/08/06 Python
python 用struct模块解决黏包问题
2020/11/07 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
毕业设计计划书
2014/01/09 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
2015年质检工作总结
2015/05/04 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
高三英语教学反思
2016/03/03 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书