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

缺乏、安全感 2024-04-19 12:36 73阅读 0赞

--------------------

**要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)**

--------------------

谈一谈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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70 1][]

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

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

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

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的更好的方法也希望能告诉柚子一下，柚子感激不尽！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190918142651380.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d16eaaba8a0e48af9ae0434936d4e1a5.jpg