收藏
回答

webview组件显示H5页面内容不全,请问如何解决?

问题产生:

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)
  }
最后一次编辑于  2021-09-08
回答关注问题邀请回答
收藏

2 个回答

  • 年轻乄霸道
    年轻乄霸道
    2021-09-08

    1、是否H5的页面布局问题?

    2、小程序官方提供有打开pdf的API 为什么还要用嵌入的H5(用户体验还不太好!!!)

    2021-09-08
    有用 2
    回复 3
    • Jerry
      Jerry
      2021-09-08
      谢谢回答,是否因为页面布局这个我不太确定,但是正常使用浏览器访问是可以全部展示的,而小程序的webview组件不行。然后不用微信官方api是有特殊原因,没办法使用。
      2021-09-08
      回复
    • 年轻乄霸道
      年轻乄霸道
      2021-09-08回复Jerry
      代码正常是没问题的  我的意思是H5这边的布局边距或者什么影响的 展示不全?  微信官方不会对任何H5链接进行特殊操作的  (建议可以使用微信官方API,也可以对H5进行个排查【可以先在服务端放个简单的pdf  嵌入再打开试试】)
      2021-09-08
      1
      回复
    • ¿仝?
      ¿仝?
      2021-09-18回复年轻乄霸道
      已验证  之间打开pdf很友好的
      2021-09-18
      回复
  • 微盟
    微盟
    2021-09-08

    上代码

    2021-09-08
    有用
    回复 1
    • Jerry
      Jerry
      2021-09-08
      已更
      2021-09-08
      回复
登录 后发表内容