小程序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文件

小程序webview实现在线查看pdf文件_第1张图片

二、实现思路:

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

小程序webview实现在线查看pdf文件_第2张图片

小程序页面:

小程序webview实现在线查看pdf文件_第3张图片

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

小程序webview实现在线查看pdf文件_第4张图片

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

你可能感兴趣的:(小程序+webview+pdf)