uniApp预览PDF文件 ，遇到的问题_uni-app nvue pdf查看部分显示不了

众所周知，移动端的兼容性是不能和pc端比较的，这次项目移动端使用pdf.js预览pdf，就让我踩了无数的坑，下面介绍一下，做法

首先下载pdf.js,官网下载即可，也可私聊我，发给你。
下载完成后将文件夹放在static文件夹下，如图：

我们使用web-view预览，首先创建显示预览pdf的页面，只需要将allUrl赋值为：this.allUrl = /static/pdfjs/web/viewer.html?file=${url}就可以啦，${url}是后面转换出来的文件url

<template>
	<view class="index">
		<web-view :src="allUrl"></web-view>
	</view>
</template>
1
2
3
4
5

接下来重头戏，请求后台接口，获取pdf文件流，我这边开始接收blob,但始终显示显示都是白屏，最终也没有找原因，因为同样的接口，在pc端是没有任何问题的。
最终，让后端小哥哥把blob换成了base64串，返给我，终于大功告成了。直接上代码：

        //这里是请求接口的方法
        getFixmedinsMatlEvtMobByEmid({
				emid: this.emid
			}).then((res) => {
		    	//后端反的base64，
				var str1 = res.data.data.filebase64
				//下面代码将base64转换成blob,
				var bstr = atob(str1);
				var n = bstr.length;
				var u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				var pdf = new Blob([u8arr], {
					type: 'application/pdf'
				});
				//创建文件连接url
				let url = URL.createObjectURL(pdf)
                
               // 为区分h5端和小程序端
				// #ifdef H5
				  //下面的路径就是pdf.js文件夹下对应的路径，用来格式化展示pdf
			    	this.allUrl = `/static/pdfjs/web/viewer.html?file=${url}`
				// #endif

                 //下面是uniapp的方法，在app端，会调用对应软件打开。
				// #ifdef APP-PLUS//
				uni.downloadFile({ //通过uniapp的api下载下来,app端会调用对应软件打开
					url: `${url}`,
					success: function (res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function (FileRes) {
								console.log('打开文档成功');
							}
						});
					}
				});
				// #endif

			})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

效果预览：

以上就是全部。 要是有大佬知道我这里为什么直接接后端的blob不行，麻烦帮我答疑解惑，本人太菜。
因为不少小伙伴私信需要pdfjs,我放在资源里下载了，连接如下
https://download.csdn.net/download/qq_41859063/86796227