环境:
uni-app 微信小程序
需求描述:
前端请求后端接口,后端返回 base64 格式的 pdf 文件流,前端获取数据打开查看 pdf
代码实现:
1.添加接口响应头配置
responseType: 'arraybuffer'
2.使用微信文件管理系统将 后端接口返回的 base64 格式文件流写入手机,然后打开预览
// 调用获取 pdf 文件流接口
await getReportDoc({ ...params }).then((data) => {
const fs = uni.getFileSystemManager()
const filePath = wx.env.USER_DATA_PATH + '/' + Date.now() + '.pdf' // wx.env.USER_DATA_PATH 为微信提供的保存文件路径
fs.writeFile({
filePath,
data: wx.base64ToArrayBuffer(data.data.replace(/[\r\n]/g, '')), // 将 base64 转为 arrayuffer
success (res) {
uni.openDocument({
showMenu: true,
fileType: 'pdf',
filePath,
success: function (res) {
console.log('打开文档成功')
}
})
},
fail (err) {
console.log('错误', err)
}
})
})
这里说一下,小程序不支持 Blob,所以响应类型 responseType 不能设置为 Blob,我查了很多,亲测以上代码有效。如有其他方式,欢迎补充