微信小程序预览二进制流文件的方法

2022-08-28 09:41:42

微信小程序将后端接口返回的二进制流PDF文件在线预览,供大家参考,具体内容如下一、微信小程序的文件系统微信小程序文件系统参考官方文档:微信小程序文档我们主要是把后端接口获取到的pdf二进制流,下载保...

微信小程序将后端接口返回的二进制流PDF 文件在线预览,供大家参考,具体内容如下

一、微信小程序的文件系统

微信小程序文件系统参考官方文档:微信小程序文档
我们主要是把后端接口获取到的pdf二进制流,下载保存到微信的本地用户文件,下载后预览再删掉,因为本地用户文件每个用户只有200M,所以预览后删掉。

二、小程序实现文件预览

代码如下(示例):

//使用登记牌扫码查询
  usequercode() {
   uni.scanCode({
    onlyFromCamera: true,
    success: function(res) {
     wx.showLoading({
      title: '正在识别中....'
     });
     //扫描二维码
     if (res.scanType != 'QR_CODE') {
      uni.showToast({
       title: '请扫描正确的使用登记牌二维码',
       duration: 2000,
       icon: 'none'
      });
      return;
     }
     //未携带需要的参数
     else if (res.result.indexOf('applyId') < 0 || res.result.indexOf('applyType') < 0) {
      uni.showToast({
       title: '解析二维码中存在非法参数',
       duration: 2000,
       icon: 'none'
      js});
      return;
     }
     console.log('条码类型:' + res.scanType);
     console.log('条码内容:' + res.result);
     //再文件下载后的用处
     const result = res.result;
     const applyid = result.substring(result.lastIndexOf('=') + 1); //获取到条码内容,获取参数访问接口
     const applytype = result.substring(result.indexOf('=') + 1, result.indexOf('&'));
     console.log(applyid);
     consolpythone.log(applytype);

     //读取本地文件
     const fs = uni.getFileSystemManager();

     uni.request({
      url: getApp().globalData.config.url + 'enterprise/useApply/usingCodeUpload',
      method: 'POST',
      headers: { isToken: false },
      data: { applyId: applyid, applyType: applytype },
      responseType: 'arraybuffer', //此处是请求文件流,必须带入的属性
      success: res => {
       console.log(res);
       var data = res.data;
       //将接口返回的二进制数据转成pdf文件
       //uni.getFileSystemManager()
       wx.getFileSystemManager().writeFile({
        // 写文件
        filePath: wx.env.USER_DATA_PATH + '/使用登记牌.pdf', // wx.env.USER_DATA_PATH 指定临时文件存入的路径,后面字符串自定义
        data: data,
        encoding: 'binary', //二进制流文件必须是 binary
        success(res) {
         wx.openDocument({
          // 新开页面打开文档
          filePath: wx.env.USER_DATA_PATH + '/使用登记牌.pdf', //拿上面存入的文件路径
          success: function(res) {
           console.log(res);
           setTimeout(() => {
            wx.hideLoading();
           }, 500);
           //查看后删除本地用户文件
           //wx.getFileSystemManager().unlink({
            // 写文件
            //filePath: wx.env.USER_DATA_PATH + '/使用登记牌.pdf', // wx.env.USER_DATA_PATH 指定临时文件存入的路径,后面字符串自定义

            //success(res) {
             //console.log(res);
            //}
           //});
          }
         });
        },
        error(error) {
         console.log(error);
        }
       });
      }
     });
    }
   });
  },

三、实现效果图

微信小程序预览二进制流文件的方法

总结

我本来想打开后删除的,再真机调试下没问题,但发布在手机上提示预览失败,请在其他应用打开,删除写在compltet也一样,后面考虑到服务器资源内存资源比存储性能高,由放在服务器上了pdf。

以上就是本文的全部内容,希望对大家php的学习有所帮助,也希望大家多多支持我们。