微信小程序实现打开并下载服务器上面的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 相关文章推荐
使弱类型的语言JavaScript变强势
Jun 22 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
js生成word中图片处理方法
Jan 06 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
js实现3D旋转效果
Aug 18 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
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
Vue.js实现的购物车功能详解
2019/01/27 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
python冒泡排序简单实现方法
2015/07/09 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
聚网科技C++面试笔试题
2015/09/01 面试题
餐饮管理自我介绍信
2014/01/15 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
计生专干事迹
2014/05/28 职场文书
学生检讨书如何写
2014/10/30 职场文书
李强感恩观后感
2015/06/17 职场文书