微信小程序实现打开并下载服务器上面的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 相关文章推荐
js 手机号码合法性验证代码集合
Sep 29 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
javascript自执行函数
Feb 10 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 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
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
php array_map()函数实例用法
2021/03/03 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
vue引入axios同源跨域问题
2018/09/27 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
python检测某个变量是否有定义的方法
2015/05/20 Python
Python功能键的读取方法
2015/05/28 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
大学竞选班长演讲稿
2014/04/24 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
2014年保密工作总结
2014/11/22 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python