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 相关文章推荐
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
js中跨域方法原理详解
Jul 19 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
js实现3d悬浮效果
Feb 16 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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 db类库进行数据库操作
2009/03/19 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
详解JavaScript事件循环机制
2018/09/07 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
浅析Python 中整型对象存储的位置
2016/05/16 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
如何把python项目部署到linux服务器
2020/08/26 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
财务管理职业生涯规划书
2014/02/26 职场文书
三方协议书范本
2014/04/22 职场文书
软件测试专业推荐信
2014/09/18 职场文书
社区宣传标语口号
2015/12/26 职场文书
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers
python 学习GCN图卷积神经网络
2022/05/11 Python