微信小程序—怎么在线预览二进制流文件? - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序—怎么在线预览二进制流文件?

发表时间:2020-10-15

发布人:葵宇科技

浏览次数:171

一、关于微信小程序如何在线预览,我的思路是两部处理:

  1. 将后台返回的二进制流,保存在本地临时文件。
  2. 打开本地临时文件。

二、后台给我返回的文件流:

三、需实现的效果是:点击列表中“查看发票”(左图),跳转到在线预览界面(右图,是微信自带的,不需要写ui界面)。

四、主要代码如下:

// 在线预览发票文件
  openFile(event){
    wx.showLoading({
      title: '加载中',
    })
    let { invoiceId } = event.currentTarget.dataset.msgarr; //发票id
    // 接口请求
    wx.request({
      url: config.baseUrl + `/wechatApplet/wechatPayFlow/getPdfFile/${invoiceId}`,
      header: {
        "content-type": "application/json",
        "token": wx.getStorageSync('logToken').token
      },
      method: "GET",
      responseType: "arraybuffer", //此处是请求文件流,必须带入的属性
      success: rest => {
        if(rest.statusCode === 200){
          const fs = wx.getFileSystemManager(); //获取全局唯一的文件管理器
          fs.writeFile({ // 写文件
            filePath: wx.env.USER_DATA_PATH + "/电子发票在线预览.pdf", // wx.env.USER_DATA_PATH 指定临时文件存入的路径,后面字符串自定义
            data: rest.data,
            encoding: "binary", //二进制流文件必须是 binary
            success (res){
              wx.openDocument({ // 新开页面打开文档
                filePath: wx.env.USER_DATA_PATH + "/电子发票在线预览.pdf",  //拿上面存入的文件路径
                success: function (res) {
                  setTimeout(()=>{wx.hideLoading()},500)
                }
              })
            }
          });
        }
      }
    })
  },

五、参考文献:

  1. HTTPS 网络请求( wx.request ):https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
  2. 获取全局唯一的文件管理器( FileSystemManager ):https://developers.weixin.qq.com/miniprogram/dev/api/file/FileSystemManager.html
  3. 写文件 ( FileSystemManager.writeFile ):https://developers.weixin.qq.com/miniprogram/dev/api/file/FileSystemManager.writeFile.html
  4. 新页面打开文档( wx.openDocument ):https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html

相关案例查看更多