vue中使用vue-pdf插件显示pdf
时间:2022-04-22
本文章向大家介绍vue中使用vue-pdf插件显示pdf,主要包括vue中使用vue-pdf插件显示pdf使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近笔者项目比较忙,没怎么更新博客,今天来更新一下项目中所用的一个展示pdf的功能。
一、安装
npm install --save vue-pdf
二、基本示例
<template>
<div class="pdf">
<pdf
ref="pdf"
:src="pdfUrl">
</pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'Pdf',
components:{
pdf
},
data(){
return {
pdfUrl:"http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf",
}
}
</script>
扩展:下一页、上一页、放大、缩小、顺时针、逆时针
<template>
<div class="main">
<div>
<button type="button" @click="changePdfPage(0)">上一页</button>
<button type="button" @click="changePdfPage(1)">下一页</button>
</div>
<p>{{ currentPage }} / {{ pageCount }}</p>
<div>
<button type="button" @click="scaleD()">放大</button>
<button type="button" @click="scaleX()">缩小</button>
</div>
<div>
<button type="button" @click="clock()">顺时针</button>
<button type="button" @click="counterClock()">逆时针</button>
</div>
<pdf
ref="pdf"
:src="src"
:page="currentPage"
:rotate="pageRotate"
@num-pages="pageCount = $event"
@page-loaded="currentPage = $event"
@loaded="loadPdfHandler"
></pdf>
</div>
</template>
<script>
// pdf预览
import pdf from "vue-pdf";
export default {
name: "home",
components: {
pdf
},
data() {
return {
src:
"http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
currentPage: 0, // pdf文件页码
pageCount: 0, // pdf文件总页数
scale: 100,
pageRotate: 0
};
},
methods: {
// pdf加载时
loadPdfHandler(e) {
e;
this.currentPage = 1; // 加载的时候先加载第一页
},
// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
changePdfPage(val) {
if (val === 0 && this.currentPage > 1) {
this.currentPage--;
}
if (val === 1 && this.currentPage < this.pageCount) {
this.currentPage++;
}
},
//放大
scaleD() {
this.scale += 5;
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
},
//缩小
scaleX() {
if (this.scale === 100) {
return;
}
this.scale += -5;
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
},
// 顺时针
clock() {
this.pageRotate += 90;
},
// 逆时针
counterClock() {
this.pageRotate -= 90;
}
}
};
</script>
<style scoped>
.main {
width: 500px;
margin: 0 auto;
border: 2px solid #409eff;
padding: 10px;
}
</style>
原文地址:https://www.cnblogs.com/panwudi/p/16178921.html
- FreeBSD下的工具(sysctl、netstat等)如何移植到F-Stack
- java面试基础知识(一)
- Linq 实现 DataTable 行转列
- sql常用的系统存储过程
- 用DPDK rte_ring实现多进程间通信
- sqlserver 的事务和c#的事务
- Flink DataStream编程指南
- oracle建表、建主键、外键基本语法
- F-Stack KNI配置注意事项
- F-Stack 助力 HTTP 网络服务器性能提升
- How to build Multi-Language Web Sites with ASP.NET 2.0 and VS.Net 2005
- 动态生成TreeView方法(二)
- Gradle打jar包如何上传到maven本地库
- POJO应用框架:Spring与EJB3.0的比较
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 我的第一个 Mono for Android 应用
- 【DB笔试面试851】在Oracle中,造成“ORA-28040: No matching ...”错误的原因是什么?
- 在 Silverlight 5 项目中使用 async/await
- 开源一个 Sliverlight 导航框架
- 【DB笔试面试852】在Oracle中,什么是静默建库?
- 从 SVN 迁移到 Git
- 在 Windows 系统上配置 Apache Git 服务器
- WMCTF2020 部分Writeup&招新帖
- 【DB宝15】生产环境中,如何利用DG的备库来异机还原一个新库?
- Java命令执行学习笔记
- SAP UI5应用DatePicker控件的设计明细
- 如何根据自己的实际需求开发属于自己的sublime text插件
- Sony Z13 系列笔记本安装 NVIDIA 官方最新版显卡驱动程序
- 通过网页进行 iOS 应用内部分发
- 【DB笔试面试853】在Oracle中,什么是手动建库?手动建库有哪些步骤?