微信小程序使用webview打开pdf文档及显示网页内容

这篇具有很好参考价值的文章主要介绍了微信小程序使用webview打开pdf文档及显示网页内容。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、微信小程序根据接口返回的pdf链接,在小程序内部浏览pdf内容
需要用到微信小程序的两个api 下载资源到本地 wx.downloadFile wx.openDocument
前一个api下载资源到本地,后一个api打开pdf文档

wx.downloadFile({ //将文档下载到本地
        url: fileUrl,//pdf链接
        success(res) {
          wx.openDocument({ //打开文档
            filePath: res.tempFilePath,//本地文档路径
            fileType: "pdf",//文档类型
            showMenu: true,
            success: function (res) {
              wx.showToast({
                title: '打开文档成功',
              })
            },
            fail: function (res) {
              wx.showToast({
                title: '打开文档失败',
              })
            },
          })
        },
      })

二、根据网页链接,把网页内容在微信小程序内部显示
需要用到微信小程序的一个标签 web-view

其实就是需要新建一个页面,然后新建的页面里面只写一个web-view标签,src等于从上一个页面传过来的值就ok了
微信小程序使用webview打开pdf文档及显示网页内容
2022年6月6日更新
微信小程序通过webview打开e签宝(ps:e签宝是一个签订电子合同的第三方网站,有兴趣的小伙伴可以点击看看 e签宝)时,提示我 不支持打开非业务域名
微信小程序使用webview打开pdf文档及显示网页内容
然后我就去百度了下,发现是需要配置e签宝的业务域名的, 之前是把接口配置在了服务器域名了,所以不行,
微信小程序使用webview打开pdf文档及显示网页内容
配置业务域名时,需要把校验文件发给第三方,在他们接口地址的目录下添加该文件
微信小程序使用webview打开pdf文档及显示网页内容
本以为业务域名配置好了,地址也发过来了,微信里面是可以打开的并且电子合同信息都完全显示、签字盖章的,但是在微信小程序里面打开却只是个静态页面,很无语,截图如下
1.微信通过点击链接打开的页面:
微信小程序使用webview打开pdf文档及显示网页内容
2.微信小程序打开的页面
微信小程序使用webview打开pdf文档及显示网页内容
有点小迷,后来想了想是不是参数没传过去,然后就打印下了跳转页面时传来的值,
微信小程序使用webview打开pdf文档及显示网页内容
而接口返回的链接呢,是这样的,明显看到?后面的值都没传过来。。
微信小程序使用webview打开pdf文档及显示网页内容
所以果然是参数没传过来啊,然后就去百度了下,发现可以使用 encodeURIComponent()对地址进行编码,然后使用decodeURIComponent()对地址进行解码,代码如下
微信小程序使用webview打开pdf文档及显示网页内容
哈哈,有活咱就干,解决不了就摆烂,可不是好习惯哦~
微信小程序使用webview打开pdf文档及显示网页内容文章来源地址https://www.toymoban.com/news/detail-484916.html

到了这里,关于微信小程序使用webview打开pdf文档及显示网页内容的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp开发微信小程序,webview内嵌h5,h5打开pdf地址,解决方案

    根据公司要求,让我写一个h5,后续会嵌入到合作公司的微信小程序的webview中,如果是自己公司微信小程序,可以采取先下载下来pdf,然后通过wx.openDocument,进行单纯的预览操作,这个可以根据这个老哥的文章去操作。但是因为是合作方公司,故只能自己想办法,起初想到的

    2024年02月07日
    浏览(55)
  • 微信小程序打开PDF文件

    在微信小程序内打开PDF文件真的要比在H5中简单得多得多,只需要结合wx.downloadFile和wx.openDocument这两个官方提供的api就可以了,打开的pdf还可以直接转发给朋友,相比H5真的太省事了。

    2024年02月01日
    浏览(64)
  • 微信小程序打开PDF、word等文件预览

            近期在使用uniapp开发微信小程序时,碰到了要在小程序上打开PDF文件预览的需求,使用原生微信小程序开发的实现和这个也是类似的。实现大致代码如下:         这里主要用到了两个API:uni.downloadFile( ) 和 uni.openDocument( ),这两个API的功能如下: uni.downloadFile( ):发

    2024年02月14日
    浏览(179)
  • 微信小程序打开pdf,并且需要在pdf下面放置签约按钮

    之前有这样一个需求,点击租房的时候,会跳转到合同页面,然后合同下面有个签约按钮,需要实现这个需求。  一开始看到这个需求,由于后端直接返回的是二进制流,所以直接在合同页面写入二进制流,结果发现合同是能正常显示,但是按钮没法放;后面为了放置签约按

    2024年02月13日
    浏览(45)
  • 微信小程序在线打开base64形式的pdf文件

    微信小程序在线打开base64形式的pdf文件 流程: 后台返回base64形式的pdf文件的字符串,在微信小程序端打开 小程序中需要用到的几个方法(按顺序) wx.base64ToArrayBuffer(base64数据) //把base64数据转buffer wx.getFileSystemManager().writeFile //写文件 wx.openDocument //打开文件

    2024年02月16日
    浏览(43)
  • uni.openDocument 微信小程序在苹果手机打开文档失败

    解决办法:         1,ios端需要传fileType参数                 uni.openDocument({                         filePath: \\\"文件路径\\\",                         fileType: \\\"docx\\\",                         success: res = {                             console.log(\\\'打开

    2024年02月09日
    浏览(43)
  • 微信小程序查看word,excel,ppt以及pdf文件(文档)

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月07日
    浏览(253)
  • 微信小程序 wx.openSetting打开不显示,封装用户授权

            测试功能的时候,想要设置用户相册的功能,打开突然什么也没有,要么就是显示“个人信息与权限使用记录”,就连打印出来的 console.log(\\\"授权\\\",res.authSetting) 授权信息也是空的。         去社区翻回答都在扯皮,也没有准确的说法,只能去看文档了。 授权

    2024年02月14日
    浏览(83)
  • 微信小程序和webview使用postMessage交互

    小程序和webview能交互,但是没有你想的那个完美 小程序向webview传递参数只能使用url携带参数 webview向小程序传递参数可以使用postMessage, 但是注意了,postMessage只会在特定的时机执行 ,请看官方文档 由此可见,如果你想点击webview中的一个按钮A,然后给小程序发消息,然后由

    2024年02月02日
    浏览(49)
  • 微信小程序使用webview实现文件上传功能

    项目开发了一个批示单的功能,用户填写批示单信息要上传正文及附件(多文件上传,有需要可在文章末尾查看),上传文件功能原调用的是uni.chooseMessageFile方法选择聊天记录中文件。 问题:用户在电脑端打开小程序后发现选择文件按钮点击无反应。 百度后发现此方法电脑

    2024年03月14日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包