uniapp小程序 处理后台的arraybuffer类型数据并实现预览pdf
处理后台的arraybuffer数据,实现预览pdf
·
1.将responseType设置成arraybuffer
未设置时就会返回像乱码一样的东西
成功拿到
2.用文件管理器将文件写入本地
const fileManager = uni.getFileSystemManager(); // 获取全局的文件管理器
const filePath = `${wx.env.USER_DATA_PATH}/${this.bookList[index].name}.pdf`; // 文件存储到本地的路径)
// this.bookList[index].name是后台传过来的pdf的名字,除了这一处其他都可以不用改
fileManager.writeFile({
data: res.data, // 拿到的arraybuffer数据
filePath: filePath,
encoding: 'binary',
success: res => {
console.log(res);// 成功了的话这里会打印 writeFile:ok
}
})
3.直接打开写入本地的文件
uni.openDocument({ // 直接打开
filePath: filePath, // 这里填上面写入本地的文件路径
fileType: 'pdf',
showMenu: true, // 右上角是否有可以转发分享的功能,配不配随意
success: res => {
console.log('打开文档成功');
}
})
我试了一下移动端是自动打开微信浏览器,用开发者工具在pc端调试是自动打开了wps🤔
完整代码:
previewFile(index) { // 循环bookList的index
uni.showLoading({
title: '正在加载...'
})
this.$request({ // 封装了的request,直接调用了
url: '',
method: 'POST',
data: {},
header: {},
responseType: 'arraybuffer' // !
}).then(res => {
const fileManager = uni.getFileSystemManager(); // 获取全局的文件管理器
const filePath = `${wx.env.USER_DATA_PATH}/${this.bookList[index].name}.pdf`; // 文件存储到本地的路径
fileManager.writeFile({
data: res.data, // 拿到的arraybuffer数据
filePath: filePath,
encoding: 'binary',
success: res => {
uni.openDocument({ // 直接打开
filePath: filePath,
fileType: 'pdf',
showMenu: true,
success: res => {
uni.hideLoading();
}
})
}
})
})
},
更多推荐
已为社区贡献3条内容
所有评论(0)