微信小程序实现打开并下载服务器上面的pdf文件到手机


Posted in Javascript onSeptember 20, 2019

谈一谈ios的bug:

        关于ios系统的bug这块也是快把柚子给逼疯了啊,ios系统是没有文件管理的,柚子用了很多办法,最后终于确定不管用什么办法ios都是实现不了下载的,只能实现在线查看。所以没办法,如果不考虑兼容ios的话,是很简单就能解决的,但是我想没有哪一个小程序会不让你兼容ios的吧!

先看一下不兼容ios系统的下载柚子是怎么实现的吧:

        首先我们需要在页面里写入一个按钮,用来触发pdf的打开和下载,写上点击事件

//查看并下载
See_download() {
   wx.downloadFile({//下载
    url: url,//服务器上的pdf地址
    filePath: wx.env.USER_DATA_PATH + '/test.pdf',//自定义文件地址
    success: function (res) {
     var filePath = res.filePath
     wx.openDocument({//打开
      filePath: filePath,
      success: function (res) {}
     })
    }
   })
}

     OK,执行完成后就已经下载了,并且也已经打开了,但是柚子刚刚就说了,ios是不支持下载的,也就是说ios可以正常打开,但是不能下载,就是这样,另外安卓的是下载了,但是不太好找,他的存放目录是:文件管理/Tencent/MicroMsg/wxanewfiles/一个名字很长的文件夹/test.pdf

微信小程序实现打开并下载服务器上面的pdf文件到手机微信小程序实现打开并下载服务器上面的pdf文件到手机

好了,这就是不兼容ios下载的方法,但是遇到问题了总要想办法解决的啊,最后实在没办法了,只能稍微改一下需求,改成了转发,反正下载下来也是要发给别人看的嘛,还不如直接点击按钮实现转发给微信好友了呢

但是微信小程序的转发是只能转发页面的,所以柚子就新建了一个专门存放pdf文件的页面,我们默人打开这个页面就自动打开pdf也是一样的效果:下面是实现思路,仅供参考:

   1、首先需要一个转发按钮,要获取微信的通讯录的话,按钮中需要加入open-type="share"这个属性的

<button type="primary" size="mini" open-type="share" > 转发 </button>

  2、有了转发按钮我们直接在页面中写方法即可:

onShareAppMessage: function (res) {
  return {
   title: '转发的标题',
   path: '/pages/pdf/pdf?url=' + this.data.url,//这个url是要带到转发的那个页面的
   imageUrl: '/static/images/pdf.png', //图片可以是本地图片
  }
},

//注:此方法是不用点击事件触发的,只要有open-type="share"就会触发,还有就是此方法是不能异步获取参数的,所有要带到转发页面的参数都要在转发之前获取到

   3、下面就是转发的页面中的内容了,要在打开这个页面的时候就进入pdf文件,为了页面的美观,柚子又做了一些优化,不需要的可以忽略,下面是代码:

<view>
 <view class="btn_box" wx:if="{{show_btn}}">
  <button type="primary" bindtap="home">返回首页</button>
  <navigator class="back" open-type="exit" target="miniProgram">关闭小程序</navigator>
 </view>
</view>
  
/* pages/pdf/pdf.wxss */
.btn_box{
 width: 100%;
 box-sizing: border-box;
 padding: 30rpx 5%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 margin-top: -50rpx;
}
button{
 margin-top: 50rpx;
 height: 100rpx;
 line-height: 100rpx;
}
.back{
 width: 100%;
 margin-top: 50rpx;
 height: 100rpx;
 line-height: 100rpx;
 color: #FFF;
 background-color: #E64340;
 box-sizing: border-box;
 font-size: 18px;
 text-align: center;
 border-radius: 10rpx;
}
// pages/pdf/pdf.js
Page({
 /**
  * 页面的初始数据
  */
 data: {
  check:0,
  url:'',
  show_btn:false,
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  this.setData({
   url: options.url
  })
 },
 // 返回首页
 home(){
  wx.reLaunch({
   url: '/pages/index/index'
  })
 },
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
  var that = this
  wx.showLoading({
   title: '加载中...',
  })
  if(this.data.check == 0){
   this.setData({
    check:1
   })
   wx.downloadFile({
    url: that.data.url,
    filePath: wx.env.USER_DATA_PATH + '/' + that.data.name,
    success: function (res) {
     var filePath = res.filePath
     wx.openDocument({
      filePath: filePath,
      success: function (res) {
       wx.hideLoading();
      }
     })
    }
   })
  }else{
   wx.hideLoading();
   this.setData({
    show_btn:true
   })
  }
 }, 
})

好了就是这些了,如果还有不懂的朋友欢迎咨询,另外如果有更好的办法,或者是支持ios下载pdf的文件的,或者转发pdf的更好的方法也希望能告诉柚子一下,柚子感激不尽!

总结

以上所述是小编给大家介绍的微信小程序实现打开并下载服务器上面的pdf文件到手机,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 #Javascript
关于layui 下拉列表的change事件详解
Sep 20 #Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 #Javascript
layui动态绑定事件的方法
Sep 20 #Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 #Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 #Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 #Javascript
You might like
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
没有document.getElementByName方法
2013/08/19 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
原生JS实现层叠轮播图
2017/05/17 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
python实现自动重启本程序的方法
2015/07/09 Python
python字符类型的一些方法小结
2016/05/16 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
用django设置session过期时间的方法解析
2019/08/05 Python
对python中UDP,socket的使用详解
2019/08/22 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
中科前程Java笔试题
2016/11/20 面试题
毕业生自我推荐
2013/11/04 职场文书
工程班组长岗位职责
2013/12/30 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
本科应届生求职信
2014/08/05 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
2015大学迎新标语
2015/07/16 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
情况说明书格式及范文
2019/06/24 职场文书
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android