微信小程序怎么实现预览二进制流文件功能
这篇文章主要介绍“微信小程序怎么实现预览二进制流文件功能”，在日常操作中，相信很多人在微信小程序怎么实现预览二进制流文件功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序怎么实现预览二进制流文件功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
一、微信小程序的文件系统
微信小程序文件系统参考官方文档：微信小程序文档
我们主要是把后端接口获取到的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);
}
});
}
});
}
});
},三、实现效果图
相关文章