Wechat applet to open pdf files

foreword

Use the native WeChat applet to open the pdf file. Note that the file stream is used, and the back-end interface also needs to be received in the form of a stream.

wxml page

  <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 page

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
          })
        }
    },

Guess you like

Origin blog.csdn.net/yingw1/article/details/132671679