uniapp小程序处理后台的arraybuffer类型数据并实现预览pdf

原创已于 2022-03-20 20:00:46 修改 · 5.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp #小程序

于 2022-03-20 14:44:07 首次发布

小程序专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在小程序中设置responseType为arrayBuffer以正确接收数据，并演示了如何使用uni-app的文件管理器将接收到的PDF数据写入本地，最后展示了如何通过uni.openDocument打开并预览这些PDF文件。开发者在移动端和PC调试时遇到的不同行为也一并提及。

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();
				}
			})
		}
	})
})
},