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

 更新时间:2022年08月28日 11:57:53   作者:花辞榭柳  
这篇文章主要为大家详细介绍了微信小程序预览二进制流文件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

微信小程序将后端接口返回的二进制流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'
                        });
                        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);
                    console.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。

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

相关文章

  • javascript cookie的基本操作(添加和删除)

    javascript cookie的基本操作(添加和删除)

    这篇文章主要介绍了javascript cookie的基本操作的相关资料,这里对Cookie的操作进行了详细介绍包括获取,新建,设置有效期,添加和删除等,需要的朋友可以参考下
    2017-07-07
  • 一文带你彻底搞懂JS中的Map与Set

    一文带你彻底搞懂JS中的Map与Set

    Set是一种叫做集合的数据结构(结构和Array很像),Map是一种叫做字典的数据结构,这篇文章主要为大家详细介绍了JavaScript中Map与Set用法与区别,需要的小伙伴可以参考下
    2023-11-11
  • JavaScript设计模式适配器模式实例

    JavaScript设计模式适配器模式实例

    这篇文章主要介绍了JavaScript设计模式适配器模式实例,适配器设计模式可以让彼此不兼容的功能在一块工作,有助于避免大规模的修改代码,并且易于扩展和兼容
    2022-06-06
  • 前端微信H5公众号实现授权登录的方法总结

    前端微信H5公众号实现授权登录的方法总结

    这篇文章主要介绍了如何在微信公众号中实现网页授权功能,包括创建微信服务公众号、配置重定向地址、调试和开发使用等步骤,文中通过图文及代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01
  • JavaScript实现一个空中避难的小游戏

    JavaScript实现一个空中避难的小游戏

    最近利用Javascript实现了一个小游戏,觉着还不错,所以分享给大家,下面这篇文章主要给大家介绍了利用JavaScript实现一个空中避难的小游戏的相关资料,文中给出了完整的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
    2017-06-06
  • 微信小程序之拖拽排序(代码分享)

    微信小程序之拖拽排序(代码分享)

    本篇文章主要分享了微信小程序拖拽排序的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    这篇文章主要介绍了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法,结合实例形式分析了微信小程序列表下拉刷新及上拉加载的相关实现方法与技巧操作,需要的朋友可以参考下
    2017-11-11
  • javascript for循环从入门到偏门(效率优化+奇特用法)

    javascript for循环从入门到偏门(效率优化+奇特用法)

    for循环是非常基础的javascript知识,但由于JS太灵活了,所以可能出现一些让初学者崩溃的写法。我决定由浅入深的解释一下for循环,算是给比我还新手的新手解惑吧,少走弯路
    2012-08-08
  • JavaScript代码异常监控实现过程详解

    JavaScript代码异常监控实现过程详解

    这篇文章主要介绍了JavaScript代码异常监控实现过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • 解决layui轮播图有数据不显示的情况

    解决layui轮播图有数据不显示的情况

    今天小编就为大家分享一篇解决layui轮播图有数据不显示的情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论