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 选择和过滤方法代码总结
Nov 19 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
简单实现js倒计时功能
Feb 13 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
javascript实现滚轮轮播图片
Dec 13 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 连接mysql连接被重置的解决方法
2011/02/15 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
深入理解JavaScript 箭头函数
2019/05/30 Javascript
npm的lock机制解析
2019/06/20 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
python 文件操作api(文件操作函数)
2016/08/28 Python
python使用KNN算法手写体识别
2018/02/01 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
python之生成多层json结构的实现
2020/02/27 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
python能否java成为主流语言吗
2020/06/22 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
英国健身超市:Fitness Superstore
2019/06/17 全球购物
临床医学应届生求职信
2013/11/06 职场文书
工会主席岗位责任制
2014/02/11 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
六年级学生评语大全
2014/12/26 职场文书
世界遗产的导游词
2015/02/13 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
MySQL自定义函数及触发器
2022/08/05 MySQL