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

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

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

查看更多关于微信小程序预览二进制流文件的方法的详细内容...