1.原因：
工作需求，需要在线预览pdf文件，就在网上冲浪，找到了这款插件，但是这个插件在使用的时候，对于定制性的功能，比如旋转文档或者一些操作css属性关于百分比的功能的时候就会出现基本上向痛的报错：
...property ...catch()..undefine之类的报错，就很迷，这是为啥，看到网上有人的解决方案，是将插件中的某个文件的这段代码（catch()...）给注释掉，结果是可以的，但是团推开发的时候咋办呢，都注释吗？最后只能妥协，关于百分比属性的操作，都换成其他的属性完成想要的功能，避免操作关于百分比的属性，就可以解决。下面是我做的初级的pdf预览：
2.案例代码：
<template>
<div class="pdf-box">
<div class="pdf-tab">
<div
class="btn-def btn-pre"
@click.stop="prePage">上一页</div>
<div
class="btn-def btn-next"
@click.stop="nextPage">下一页</div>
<div class="btn-def btn-pre" @click="scaleD">
放大
</div>
<div class="btn-def btn-pre" @click="scaleX">
缩小
</div>
</div>
<pdf
ref="pdf"
:src="pdfUrl"
:page="pageNum"
:rotate="pageRotate"
@password="password"
@progress="loadedRatio = $event"
@page-loaded="pageLoaded($event)"
@num-pages="pageTotalNum=$event"
@error="pdfError($event)"
@link-clicked="page = $event">
</pdf>
<div class="page-num">
<span>当前页码：</span>
<span>{{pageNum}}/{{pageTotalNum}}</span>
</div>
</div>
</template>
javascript:
<script>
import pdf from 'vue-pdf'
export default {
name: 'Pdf',
components:{
pdf
},
data(){
return {
pdfUrl:"http://192.168.10.111:8080/group1/group1/XsUpload/220kV佑响46E3线220kV佑牵46E1线实时工况交叉跨越分析报告.pdf?name=220kV佑响46E3线220kV佑牵46E1线实时工况交叉跨越分析报告.pdf&download=1",
pageNum:1,
pageTotalNum:1,
pageRotate:0,
w: 400,
h: 550,
scale: 550, //放大系数
}
},
mounted: function() {
// 默认大小
this.defaultPdf();
},
methods: {
prePage(){
var p = this.pageNum
p = p>1?p-1:this.pageTotalNum
this.pageNum = p
},
nextPage(){
var p = this.pageNum
p = p<this.pageTotalNum?p+1:1
this.pageNum = p
},
\
// 预览盒子默认大小
defaultPdf(){
this.$refs.pdf.$el.style.width = parseInt(this.w) + "px";
this.$refs.pdf.$el.style.width = parseInt(this.h) + "px";
},
// 放大和缩小
//放大
scaleD() {
this.scale += 150;
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "px";
},
//缩小
scaleX() {
if (this.scale == 100) {
return;
}
this.scale += -150;
this.$refs.pdf.$el.style.width = parseInt(this.scale) + "px";
},
password(updatePassword, reason) {
updatePassword(prompt('password is "123456"'))
console.log('...reason...')
console.log(reason)
console.log('...reason...')
},
pageLoaded(e){
this.curPageNum = e
},
pdfError(error){
console.error(error)
},
}
}
</script>
css:
<style scoped>
/* 组件盒子 */
.pdf-box{
display: flex;
flex-direction: column;
align-items: center;
position: relative;
border-radius: 5px 5px 60px 5px;
box-shadow: 0 0 12px 6px #a6a6a6;
/* transition: all 0.1s linear; */
}
\
>>> canvas{
border-radius: 5px 5px 60px 5px;
}
/* 美化搁浅 */
/* .pdf-box::after{
content: '';
display: inline-block;
position: absolute;
bottom: 20px;
right: 10px;
width: 50px;
height: 50px;
background: chocolate;
} */
/* 按钮盒子 */
.pdf-tab{
display: flex;
margin: 15px 0;
justify-content: space-between;
}
.btn-def{
width: 70px;
height: 20px;
padding: 2px;
background: rgb(192, 143, 125);
border-radius: 2px;
margin: 0px 10px;
text-align: center;
line-height: 20px;
color: whitesmoke;
cursor: pointer;
font-size: 13px;
}
\
/* 页码标识 */
.page-num{
margin: 20px 0;
}
.page-num span:nth-child(1){
font-size: 15px;
color: rgb(207, 8, 233);
}
.page-num span:nth-child(2){
font-size: 16px;
font-weight: 500;
color: blueviolet;
}
</style>
3.想要说的：
大家如果知到如何解决那个问题，欢迎留言，感谢！
