介绍
这篇文章给大家分享的是有关微信小程序如何实现打开并下载服务器上面的pdf文件到手机的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
ios的错误:
,,,,关于ios系统的错误这块也是快把柚子给逼疯了啊,ios系统是没有文件管理的,柚子用了很多办法,最后终于确定不管用什么办ios法都是实现不了下载的,只能实现在线查看。所以没办法,如果不考虑兼容ios的话,是很简单就能解决的,但是我想没有哪一个小程序会不让你兼容ios的吧!
先看一下不兼容ios系统的下载柚子是怎么实现的吧:
,,,,首先我们需要在页面里写入一个按钮,用来触发pdf的打开和下载,写上点击事件
//查看并下载
See_download (), {
,,wx.downloadFile({//下载
,,,url:, url,//服务器上的pdf地址
,,,filePath:, wx.env.USER_DATA_PATH +, & # 39;/test.pdf& # 39;//自定义文件地址
成功,,,:,function (res), {
,,,,var filePath =res.filePath
,,,,wx.openDocument({//打开
,,,,,filePath:, filePath,
,,,,,成功:,function (res), {}
,,,,})
,,,}
,,})
} ,,,好的,执行完成后就已经下载了,并且也已经打开了,但是柚子刚刚就说了,ios是不支持下载的,也就是说ios可以正常打开,但是不能下载,就是这样,另外安卓的是下载了,但是不太好找,他的存放目录是:文件管理<代码>/腾讯/MicroMsg/wxanewfiles/>
好了,这就是不兼ios容下载的方法,但是遇到问题了总要想办法解决的啊,最后实在没办法了,只能稍微改一下需求,改成了转发,反正下载下来也是要发给别人看的嘛,还不如直接点击按钮实现转发给微信好友了呢
但是微信小程序的转发是只能转发页面的,所以柚子就新建了一个专门存放pdf文件的页面,我们默人打开这个页面就自动打开pdf也是一样的效果:下面是实现思路,仅供参考:
,,1,首先需要一个转发按钮,要获取微信的通讯录的话,按钮中需要加入<代码>开式=皊hare" 这个属性的
& lt; button 类型=皃rimary",大?癿ini",开式=皊hare",祝辞,转发,& lt;/button> ,2,有了转发按钮我们直接在页面中写方法即可:
onShareAppMessage:, function (res), {
return {才能
,,,标题:& # 39;转发的标题& # 39;,
,,,路径:& # 39;/页面/pdf/pdf ? url=& # 39;, +, this.data.url,//这个url是要带到转发的那个页面的
,,,imageUrl: & # 39;/静态/图片/pdf.png& # 39;,,//图片可以是本地图片
,,}
}, //注:此方法是不用点击事件触发的,只要有<代码>开式=皊hare">
,,3,下面就是转发的页面中的内容了,要在打开这个页面的时候就进入pdf文件,为了页面的美观,柚子又做了一些优化,不需要的可以忽略、下面是代码:
& lt; view>
,& lt; view 类=癰tn_box",天气:如果=皗{show_btn}}“比;
& lt;才能button 类型=皃rimary", bindtap=癶ome"在返回首页& lt;/button>
& lt;才能navigator 类=癰ack",开式=癳xit",目标=癿iniProgram"在关闭小程序& lt;/navigator>
,& lt;/view>
& lt;/view>
,,/*,页面/pdf/pdf.wxss */.btn_box {
,宽度:100%;
,box-sizing: border-box;
,填充:30 rpx 5%;
,位置:绝对;
,上图:50%;
,左:50%;
,变换:翻译(-50%,-50%);
-50年,margin-top: rpx;
}
按钮{
,margin-top: 50 rpx;
,身高:100 rpx;
,行高:100 rpx;
}
.back {
,宽度:100%;
,margin-top: 50 rpx;
,身高:100 rpx;
,行高:100 rpx;
,颜色:# FFF;
,背景颜色:# E64340;
,box-sizing: border-box;
,字体大小:18 px;
,text-align:中心;
,这个特性:10 rpx;
}//页面/pdf/pdf.js
页面({/* *
*,才能页面的初始数据
,*/,数据:{
检查:0,才能
url:才能& # 39;& # 39;
show_btn才能:假的,
},/* *
*,才能生命周期函数——监听页面加载
,*/,onLoad: function (选项),{
this.setData({才能
,,url: options.url
})才能
},
,//返回首页
,回家(){
wx.reLaunch({才能
,,,url: & # 39;/页面/索引/指数# 39;
})才能
},/* *
*,才能生命周期函数——监听页面显示
,*/,昂秀:function (), {
var 才能;that =,
wx.showLoading({才能
,,,标题:& # 39;加载中…& # 39;,
})才能
如果才能(this.data.check ==, 0) {
,,this.setData ({
,,检查:1
,,})
,,wx.downloadFile ({
,,,url:, that.data.url,
,,,filePath:, wx.env.USER_DATA_PATH +, & # 39;/& # 39;, +, that.data.name,
成功,,,:,function (res), {
,,,,var filePath =res.filePath
,,,,wx.openDocument ({
,,,,,filePath:, filePath,
,,,,,成功:,function (res), {
null
null
null
null
null
null
null
null
null
null
null
null
null
