小程序中后台返回pdf二进制文件流，预览并下载

小程序中后台返回pdf二进制文件流，预览并下载 - 简书 (jianshu.com)后端接口返回二进制文件流，前端要在Hbuilder里（uni微信小程序）展示下载。

1.api

2.js

1.api.js

必须的步骤有，需要在接口表明这个属性 responseType: 'arraybuffer'

否则下载后的pdf会是一片空白，

接口封不封装都行，只要加这个属性。

	uni.request({
		url: baseUrl + `xxxxx/access_token=${token}`,
		method: "POST",
		data: data,
		responseType: "arraybuffer",
		headers: {
			'Content-Type': 'application/pdf',
		},
		success: (res) => {
			pdfData = res.data //接口调用返回文件流
			let blob = new Blob([pdfData], {
			    type: 'application/pdf;charset=UTF-8'
			})
			pdfData = window.URL.createObjectURL(blob);
			this.url = `${this.viewerUrl}?file=${encodeURIComponent(pdfData)}`
		},
		fail: (err) => {}
	})

2.vue

const fs = wx.getFileSystemManager()
const fileName = "/" + 文档名称 + ".pdf";
fs.writeFile({
	filePath: wx.env.USER_DATA_PATH + fileName,   //这里填文件的名字
	data: data ,
	// encoding:"utf-8", //Unicode
	encoding:"binary", //二进制文件流  我这里接口返回的二进制文件流，使用这两个都可以，但是不能没有 'encoding',必写
	success(res) {
		uni.openDocument({  
			showMenu: true,
			fileType:'pdf',
			filePath: wx.env.USER_DATA_PATH + fileName,
			success: function(res) {
				console.log('success')
			}
		});
	}
})

参考：小程序中后台返回pdf二进制文件流，预览并下载 - 简书 (jianshu.com)

               uniapp-h5中的文件流下载和指定的url下载总结（解决下载后的pdf打开空白情况）_h5 pdf文件流_一行代码上晴天的博客-CSDN博客