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

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

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