微信小程序实现打开并下载服务器上面的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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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
PL-880隐藏功能
2021/03/01 无线电
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
连接Python程序与MySQL的教程
2015/04/29 Python
浅谈Python的异常处理
2016/06/19 Python
python模块之time模块(实例讲解)
2017/09/13 Python
Django rest framework实现分页的示例
2018/05/24 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
如何在python中实现随机选择
2019/11/02 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
Python调用Redis的示例代码
2020/11/24 Python
致跳高运动员广播稿
2014/01/13 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
争先创优公开承诺书
2014/08/30 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
给男朋友的道歉短信
2015/05/12 职场文书