微信小程序打开pdf文件

前言

使用原生的微信小程序打开pdf文件,注意使用的是文件流的形式,后端接口也需要流的形式来接收

wxml页面

  <button style="background-color: #2486F9;color: #fff;" size="mini"  data-url="{{item.url}}" catchtap='openIOS'>协议查看</button>
//弹出框选择不同的文件
  <view wx:if="{{showIOSDialog}}" aria-role="dialog" aria-modal="true" aria-labelledby="js_dialog_title" class="fadeIn" bindtap="close">
        <view class="weui-mask" aria-role="button" aria-label="关闭" bindtap="close"></view>
        <view class="weui-actionsheet weui-actionsheet_toggle" >
            <view class="weui-actionsheet__menu"  wx:for="{{URLData}}" wx:key="index">
                <view aria-role="button" class="weui-actionsheet__cell" data-url="{{item.url}}" bindtap="handleSignSee">{{item.urlName}}</view>
            </view>
            <view class="weui-actionsheet__action">
                <view aria-role="button" class="weui-actionsheet__cell">取消</view>
            </view>
        </view>
    </view>

js页面

openIOS(e) {
      console.log(e);
      let urls=[]
      let _URLData=[]
      if(e.currentTarget.dataset.url && e.currentTarget.dataset.url.includes(',')){
        urls=e.currentTarget.dataset.url.split(',')
        console.log(urls);
        urls.forEach(v=>{
          if(v.includes('|')){
           _URLData.push({
              url:v.split('|')[0],
              urlName:v.split('|')[1]
            })
          }
        })
      }
      console.log(_URLData);
      this.setData({
        showIOSDialog: true,
        URLData:_URLData
      });
    },
 handleSignSee(e){
        console.log(e.currentTarget.dataset.url);
        app.$loading()
        if(e.currentTarget.dataset.url){
          wx.request({
            url: app.$path.download + '?fileUrl=' + e.currentTarget.dataset.url,
            method: "post",
            header: {
              "content-type": "application/json"
            },
            responseType: "arraybuffer",
            success: (result) => {
              let _fileManger = wx.getFileSystemManager();
              let _filePath = wx.env.USER_DATA_PATH + e.currentTarget.dataset.url.substring(e.currentTarget.dataset.url.lastIndexOf("/"));
              _fileManger.writeFile({
                data: result.data,
                filePath: _filePath,
                encoding: "binary",
                success: res => {
                  wx.openDocument({
                    filePath: _filePath,
                    fileType: _filePath.substring(_filePath.lastIndexOf(".") + 1),
                    showMenu:true,
                    success: function (res) {
                      app.$hide()
                      console.log('打开文档成功')
                    },
                    fail:function(res){
                      wx.showToast({
                        title: '文件打开失败',
                        icon:'none',
                        duration:2000
                      })
                    }
                  })
                },
                fail: res => {
                  console.log(res)
                }
              });
            },
            fail: res3 => {
              console.log("res3 fail")
            }
          })
        }else{
          wx.showToast({
            title: '文件不存在,请联系管理员',
            icon:'none',
            duration:2000
          })
        }
    },

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冰冰-ying

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值