微信小程序—怎么在线预览二进制流文件?
发表时间:2020-10-15
发布人:葵宇科技
浏览次数:263
一、关于微信小程序如何在线预览,我的思路是两部处理:
- 将后台返回的二进制流,保存在本地临时文件。
- 打开本地临时文件。
二、后台给我返回的文件流:
三、需实现的效果是:点击列表中“查看发票”(左图),跳转到在线预览界面(右图,是微信自带的,不需要写ui界面)。
四、主要代码如下:
// 在线预览发票文件
openFile(event){
wx.showLoading({
title: '加载中',
})
let { invoiceId } = event.currentTarget.dataset.msgarr; //发票id
// 接口请求
wx.request({
url: config.baseUrl + `/wechatApplet/wechatPayFlow/getPdfFile/${invoiceId}`,
header: {
"content-type": "application/json",
"token": wx.getStorageSync('logToken').token
},
method: "GET",
responseType: "arraybuffer", //此处是请求文件流,必须带入的属性
success: rest => {
if(rest.statusCode === 200){
const fs = wx.getFileSystemManager(); //获取全局唯一的文件管理器
fs.writeFile({ // 写文件
filePath: wx.env.USER_DATA_PATH + "/电子发票在线预览.pdf", // wx.env.USER_DATA_PATH 指定临时文件存入的路径,后面字符串自定义
data: rest.data,
encoding: "binary", //二进制流文件必须是 binary
success (res){
wx.openDocument({ // 新开页面打开文档
filePath: wx.env.USER_DATA_PATH + "/电子发票在线预览.pdf", //拿上面存入的文件路径
success: function (res) {
setTimeout(()=>{wx.hideLoading()},500)
}
})
}
});
}
}
})
},
五、参考文献:
- HTTPS 网络请求( wx.request ):https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
- 获取全局唯一的文件管理器( FileSystemManager ):https://developers.weixin.qq.com/miniprogram/dev/api/file/FileSystemManager.html
- 写文件 ( FileSystemManager.writeFile ):https://developers.weixin.qq.com/miniprogram/dev/api/file/FileSystemManager.writeFile.html
- 新页面打开文档( wx.openDocument ):https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html