解决:微信小程序PDF文件下载,PDF文件预览

项目需求:需要在小程序中实现 发票的预览查看、下载发票功能(pdf文件)

方法一

小程序打开文件可使用web-view,会自动铺满整个小程序页面(个人类型的小程序暂不支持使用)。但src里面放pdf文件会有兼容性问题(ios正常展示,安卓空白)

<web-view src="{{http://xxx.com/xxx.pdf}}"></web-view>

方法二

解决:使用微信自带的div解决

  • wx.downloadFil():下载文件资源到本地。直接发起一个 HTTPS GET 请求,返回文件的本地临时路径 (本地路径),单次下载允许的最大文件为 200MB
  • wx.openDocument(): 新开页面打开文档。微信客户端 7.0.12 版本前默认显示右上角菜单按钮,之后的版本默认不显示,需主动传入 showMenu: true 
   wx.downloadFile({
        url: 'http://xxx.com/xxx.pdf',
        success: function (res) {
        const filePath = res.tempFilePath
        wx.openDocument({
            filePath: filePath,
            showMenu: true, // 右上角会出现 ··· 可以分享转发文件
            success: function (res) {
            console.log('打开文档成功')
            }
        })
    }})

因为手机操作不同于电脑的文件操作,手机用户使用场景多于转发文件,然后在聊天页面去打开该文件,并不会在手机文件夹中去选择去打开某个文件。

  • 7
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值