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优缺点分析说明
Jun 09 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
JavaScript的Set数据结构详解
Feb 18 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中数据的批量导入(csv文件)
2006/10/09 PHP
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
python截取两个单词之间的内容方法
2018/12/25 Python
对python调用RPC接口的实例详解
2019/01/03 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
阿巴庭院:Abba Patio
2019/06/18 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
求职推荐信
2013/10/28 职场文书
党课学习思想汇报
2014/01/02 职场文书
家电业务员岗位职责
2014/03/10 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
员工升职自荐信
2015/03/27 职场文书
公路施工安全责任书
2015/05/08 职场文书
2016国培学习心得体会
2016/01/08 职场文书