解决uni pdf.js 接口请求后台文件流显示白屏问题

pdf.js的使用这里不再多介绍了，直接奔向主题。

场景介绍：金融系统项目，合同类型pdf，甲方要求不能直接用链接请求PDF文件流，需要用post方式去服务器拿流。

网上查到的资料都是这个样子的

通过页面参数传值的方式加载pdf文件 

file的值需要URLEncode编码 指向服务器端
例如： http://xxxxx.com:89/demo/fileupdownfud=1&rid=4&isweb=1&iswebshow=1&dbid=01&filepath=fj_ob_item/Y201809/11.pdf
URLEncode编码：为 http%3A%2F%2Fxxxx.com%3A89%2Fdemo%2Ffileupdown%3Ffud%3D1%26rid%3D4%26isweb%3D1%26iswebshow%3D1%26dbid%3D01%26filepath%3Dfj_ob_item%2FY201809%2F11.pdf
访问地址为： http://127.0.0.1:8080/pdfjs/web/viewer.html?file=http%3A%2F%2Fxxxx.com%3A89%2Fdemo%2Ffileupdown%3Ffud%3D1%26rid%3D4%26isweb%3D1%26iswebshow%3D1%26dbid%3D01%26filepath%3Dfj_ob_item%2FY201809%2F11.pdf
原文链接：https://blog.csdn.net/l_ai_yi/article/details/82388497

但是我需要的是这个样子的

              let pdfData = "";
				let data = {}
				data.fileUrl = this.query.id
				uni.request({
					url: baseUrl + `xxxxx/access_token=${token}`,
					method: "POST",
					data: data,
					success: (res) => {
						pdfData = res.data //接口调用返回文件流
						this.url = `${this.viewerUrl}?file=${encodeURIComponent(pdfData)}`
					},
					fail: (err) => {}
				})

结果就显示肯定是不行的。。。查阅资料修改代码

               let pdfData = "";
				let data = {}
				data.fileUrl = this.query.id
				uni.request({
					url: baseUrl + `xxxxx/access_token=${token}`,
					method: "POST",
					data: data,
					responseType: "blob",
					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) => {}
				})

这个结果不错，出来文件了的。。。页数也正确。。。但这个坑爹的竟然白屏了的。。。。文本哪里去了的，上网查资料，说是blob的问题，参考了
https://www.cnblogs.com/jeffhong99/p/12887631.html
很受启发，文件流应该是编码可能有问题，所以文本不能正常解析出。
responseType: "blob"
这个是关键东西，上网查看了他的类型，死马当活马医吧，网上一堆跟我同样问题的人，都没有解决，我只能自己尝试

                let pdfData = "";
				let data = {}
				data.fileUrl = this.query.id
				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) => {}
				})

responseType: "arraybuffer"
我切换成这个后，pdf显示出来了，如果有同样问题的可以尝试一下，说不定能解决pdf文件流预览白屏的问题，折腾我两天的问题终于能解决了~~

参考文章
https://blog.csdn.net/halo1416/article/details/84590694?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.nonecase

https://www.jianshu.com/p/7f65c1edc541

https://www.jianshu.com/p/242525315bf6