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制作坦克大战全纪录(1)
Nov 27 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
stripos函数知识点实例分享
2019/02/11 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
对python周期性定时器的示例详解
2019/02/19 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
Python中logging日志库实例详解
2020/02/19 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
法院授权委托书格式
2014/09/28 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
红白喜事主持词
2015/07/06 职场文书
PHP策略模式写法
2021/04/01 PHP
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js