问题产生:
1.H5用于展示服务器上的pdf文件,使用pdfjs-dist库,pdf文件内含电子印章。在解开电子印章显示效果前,在微信小程序内通过webview组件访问H5,pdf文件可完整展示;解开电子印章显示效果后,pdf文件展示不完全,仅能展示至第一个电子印章的页面为止,后续全部为空白页。
2.解开电子印章效果前后,H5通过谷歌浏览器,safari等浏览器皆可查看正常,显示全部内容。
请问有人遇到过这个问题吗?
H5:
<template>
<div style="background-color:white;height:auto;">
<div>
<pdf v-for="i in numPages" :key="i" :src="src" :page="i" ref="myPdfComponent"></pdf>
</div>
</div>
</template>
PDF展示方法:
methods:{
async getPdf(){
await commit(this.data).then((res)=>{
console.log(res);
console.log(res.extend.data);
this.pdfDisplay(res.extend.data);
})
},
async pdfDisplay(data){
console.log(data);
let da = data;
console.log(da);
let datas = 'data:application/pdf;base64,' + da;
this.src = pdf.createLoadingTask({ url: datas, CMapReaderFactory });
this.src.promise.then(pdf => {this.numPages = pdf.numPages;});
},
},
微信小程序:
<web-view src="{{path}}"></web-view>
onLoad: function (options) {
this.setData({
path:'https://XXXXXXXXXXXXXX'+options.content+'&signKey='+options.signKey
})
console.log('path',this.data.path)
}
1、是否H5的页面布局问题?
2、小程序官方提供有打开pdf的API 为什么还要用嵌入的H5(用户体验还不太好!!!)
上代码