vue-pdf
<template>
<div class="pdf_outWarp">
<div class="pdf_innerWarp" id="innerWarp" v-show="isPfdShow">
<vue-scroll :ops='ops'>
<div class="wrapper rollS" id="pdf-container" @mouseenter="isrolls" @mouseleave="norolls"></div>
</vue-scroll>
<div class='funImg' ref="funImg">
<a title="全屏" @click.prevent=" fullScreen"><img :src="fullImg" alt=""></a>
<a title="下载到列表"><img src="../assets/xiazai.png" alt=""></a>
<a title="另存为本地"><img src="../assets/lingcw.png" alt=""></a>
<!-- <a title="修改" @click.prevent="changge"><img src="../assets/bianj.png" alt=""></a> -->
<a title="放大" @click.prevent="enlarge"><img src="../assets/fangda.png"></a>
<a title="缩小" @click.prevent="narrow"><img src="../assets/suoxiao.png"></a>
<a title="删除"><img src="../assets/shanch.png" alt="删除"></a>
</div>
</div>
<div class="mode" @click.self="closepdf">
<!-- 等待动画 -->
<div class="blinking">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<p>拼命加载中...</p>
</div>
</div>
</div>
</template>
<script>
import PDFJS from '../../static/pdf/pdf'
export default {
props: ['pdfurl', 'isflg'],
data() {
return {
ops: {
vuescroll: {
mode: 'native',
sizeStrategy: 'percent',
detectResize: true,
},
bar: {
showDelay: 500,
onlyShowBarOnScroll: true,
keepShow: false,
background: '#028198',
opacity: 1,
hoverStyle: false,
specifyBorderRadius: false,
minSize: false,
size: '10px',
disable: false,
}
},
fullImg: '../../static/iconimg/quanping.png',
scale: 1, //放大倍数
maxscale: 2, //最大放大倍数
minscale: 0.8, //最小放大倍数
isfullScreen: false, //全屏
timer: null, //定时器
isPfdShow: false // 控制画布显示与否
}
},
methods: {
// 修改
changge() {
},
// 滚动条显示与否
isrolls() {
this.ops.bar.keepShow = true;
},
norolls() {
this.ops.bar.keepShow = false;
},
// 关闭按钮
closepdf() {
this.$emit('closepdf', '');
this.isPfdShow = false;
},
// 下方按钮逻辑
// 放大
enlarge() {
if (this.scale >= this.maxscale) {
return
}
this.scale += 0.1;
this.loadPDF(this.pdfurl)
},
// 缩小
narrow() {
if (this.scale <= this.minscale) {
return
}
this.scale -= 0.1;
this.loadPDF(this.pdfurl)
},
// 全屏
fullScreen() {
if (!this.isfullScreen) {
document.getElementById('innerWarp').style.width = screen.width + 'px'
document.getElementById('innerWarp').style.height = screen.height + 'px'
this.$refs.funImg.style.bottom = '0px'
this.fullImg = '../../static/iconimg/huanyuan00.png'
} else {
document.getElementById('innerWarp').style.width = '70%'
document.getElementById('innerWarp').style.height = '70%'
this.$refs.funImg.style.bottom = '-30px'
this.fullImg = '../../static/iconimg/quanping.png'
}
this.isfullScreen = !this.isfullScreen
},
// 创建pdf外层
createPdfContainer(id, className) {
var pdfContainer = document.getElementById('pdf-container');
var canvasNew = document.createElement('canvas');
canvasNew.id = id;
canvasNew.className = className;
pdfContainer.appendChild(canvasNew);
},
//渲染pdf
//建议给定pdf宽度
renderPDF(pdf, i, id) {
let vm = this;
pdf.getPage(i).then(function (page) {
var scale = vm.scale;
var viewport = page.getViewport(scale);
//
// 准备用于渲染的 canvas 元素
//
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// 将 PDF 页面渲染到 canvas 上下文中
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
},
//创建和pdf页数等同的canvas数
createSeriesCanvas(num, template) {
let vm = this;
var id = '';
for (var j = 1; j <= num; j++) {
id = template + j;
vm.createPdfContainer(id, 'pdfClass');
}
},
// 读取
loadPDF(fileURL) {
document.getElementById('pdf-container').innerHTML = "";
let vm = this;
PDFJS.getDocument(fileURL).then(function (pdf) {
//用 promise 获取页面
var id = '';
var idTemplate = 'cw-pdf-';
var pageNum = pdf.numPages;
//根据页码创建画布
vm.createSeriesCanvas(pageNum, idTemplate);
//将pdf渲染到画布上去
for (var i = 1; i <= pageNum; i++) {
id = idTemplate + i;
vm.renderPDF(pdf, i, id);
}
});
// 等待函数
let timer = setInterval(() => {
if (PDFJS.PDFViewerApplication = null) {
console.info('Loading...');
} else {
clearInterval(timer);
console.info('Load Success...');
this.isPfdShow = true;
}
}, 1000);
},
},
watch: {
isflg(val) {
this.loadPDF(this.$props.pdfurl)
}
}
}
</script>
<style scope>
/* 等待动画 */
.blinking {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 82px;
border-radius: 5px;
padding: 8px;
margin: 0 auto;
}
.blinking>p {
font-size: 14px;
text-align: center;
position: absolute;
bottom: -10px;
padding-left: 12px;
color: #ffffff;
}
.blinking span {
width: 15px;
height: 8px;
display: inline-block;
border-radius: 20px;
background: #00ade5;
position: absolute;
left: 50%;
top: 50%;
animation: 1s blink infinite;
transform-origin: left top;
}
@keyframes blink {
0% {
opacity: 0.4;
}
30% {
opacity: 0.6;
}
60% {
opacity: 0.8;
}
100% {
opacity: 1;
}
}
.blinking span:first-child {
transform: rotate(45deg) translateX(18px);
animation-delay: 0.125s;
}
.blinking span:nth-child(2) {
transform: rotate(90deg) translateX(18px);
animation-delay: 0.25s;
}
.blinking span:nth-child(3) {
transform: rotate(135deg) translateX(18px);
animation-delay: 0.375s;
}
.blinking span:nth-child(4) {
transform: rotate(180deg) translateX(18px);
animation-delay: 0.5s;
}
.blinking span:nth-child(5) {
transform: rotate(225deg) translateX(18px);
animation-delay: 0.625s;
}
.blinking span:nth-child(6) {
transform: rotate(270deg) translateX(18px);
animation-delay: 0.75s;
}
.blinking span:nth-child(7) {
transform: rotate(315deg) translateX(18px);
animation-delay: 0.875s;
}
.blinking span:nth-child(8) {
transform: rotate(360deg) translateX(18px);
animation-delay: 0s;
}
.mode,
.pdf_outWarp {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
z-index: 9999;
}
.pdf_innerWarp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
height: 70%;
background: #ffffff;
z-index: 99999999;
}
.funImg {
height: 30px;
cursor: pointer;
background: #222222;
line-height: 36px;
position: absolute;
bottom: -30px;
right: 0px;
z-index: 99999999;
}
.pdfClass {
/* border: 1px solid black; */
}
.wrapper {
height: 100%;
overflow: auto;
}
.wrapper>canvas {
display: block;
margin: 0 auto;
}
</style>
