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 Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
jQuery 联动日历实现代码
May 31 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
Json解析的方法小结
Jun 22 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 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
ajax缓存问题解决途径
2006/12/06 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
php检测文件编码的方法示例
2014/04/25 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP文件操作方法汇总
2015/07/01 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
javascript闭包入门示例
2014/04/30 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
清除输入框内的空格
2016/12/21 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
React简单介绍
2017/05/24 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
python根据多个文件名批量查找文件
2019/08/13 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
在校生党员自我评价
2013/09/25 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
Python+Appium新手教程
2021/04/17 Python
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
详解Go与PHP的语法对比
2021/05/29 PHP