小程序webview实现在线查看pdf文件

long time no see,还是之前的webview项目新增需求,电子发票这块需要查看发票详情。针对这个需求,百度得出两种结论,一种是用小程序api调起文件,另一种是pdf插件。一开始我用的是pdf插件,下载了pdf.js和pdf.worker.js,pdfobject.js (这有两种实现方法,百度过的小伙伴应该都有了解,用pdfobject.js 调起的在安卓机上直接下载了pdf不可以直接查看,而ios可以直接在线查看pdf文档,试过canvas结合pdfjs也没有成功,可能是我哪步走错了。看了很多资料也在一些博主楼下留言都没有反应。。)

一、期望实现:

点击列表页面查看发票,则显示当前电子发票的pdf文件

二、实现思路:

1.从小程序内访问H5商城内的电子发票页面。通过webview组件实现,页面实现方法如下:

小程序页面:

将h5页面的内容带到小程序中,进行解析后,取到pdf的url路径,运用wx.downloadFile调起文件:

这种方法既能满足安卓机的需求,也可以在苹果机上使用。希望能帮助到你们哦~继续加油

在微信小程序webview中,要实现文件下载功能,可以通过以下步骤进行操作: 1. 在小程序webview中,可以使用标准的HTML元素`<a>`来触发文件下载。首先,在小程序webview页面中,添加一个下载按钮或者链接,例如: ```html <a href="https://example.com/path/to/file.pdf" download>点击下载文件</a> ``` 其中`https://example.com/path/to/file.pdf`是要下载的文件的URL,`download`属性表示要下载文件而不是在浏览器中打开。 2. 在小程序webview页面的JS代码中,可以监听这个下载链接的点击事件,并在点击时触发文件下载。例如: ```javascript document.querySelector('a').addEventListener('click', function(e) { e.preventDefault(); // 阻止默认的链接跳转行为 var url = this.getAttribute('href'); wx.downloadFile({ url: url, success: function(res) { var filePath = res.tempFilePath; // 下载后的临时文件路径 wx.saveFile({ tempFilePath: filePath, success: function(res) { var savedFilePath = res.savedFilePath; // 保存后的文件路径 // 文件保存成功后的操作 }, fail: function(res) { // 文件保存失败后的操作 } }); }, fail: function(res) { // 文件下载失败后的操作 } }); }); ``` 以上代码中,`document.querySelector('a')`用于获取第一个`<a>`元素,根据实际情况可能需要修改选择器;`wx.downloadFile`用于下载文件,`wx.saveFile`用于保存文件到本地。 需要注意的是,下载文件需要在小程序的`app.json`配置文件中添加相应的权限设置,例如: ```json { "mp-weixin": { "permission": { "scope.userLocation": { "desc": "获取您的地理位置信息将用于小程序定位" }, "scope.writePhotosAlbum": { "desc": "保存图片到相册" }, "scope.camera": { "desc": "拍摄照片或者录像" }, "scope.record": { "desc": "录制音频" }, "scope.userInfo": { "desc": "获取您的基本信息将用于小程序登录" }, "scope.userLocationBackground": { "desc": "获取您的地理位置信息将用于小程序定位" }, "scope.invoiceTitle": { "desc": "获取你发票抬头" }, "scope.invoice": { "desc": "获取你发票" }, "scope.werun": { "desc": "微信运动步数" }, "scope.writeVideosAlbum": { "desc": "保存视频到相册" } } } } ``` 以上是在微信小程序webview实现文件下载的一种方式,你可以根据具体需求进行调整和扩展。
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值