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

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

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