小程序中后台返回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文件流_一行代码上晴天的博客-优快云博客

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值