uni-app 文件预览 兼容App、h5以及Android和iOS系统

<text @click="downloadFileFn(item)" class="preview">预览</text>

点击文件预览，根据传递的文件名参数执行下载方法如下：

downloadFileFn(fileName) {
				console.log('fileName',fileName) // 输出： /profile/upload/2023/05/04/16831863657071682042424944信息.docx 
				uni.showLoading({
					title: '文件加载中...'
				});
				let url = getApp().globalData.baseUrl + fileName;
				let name = "";
				let index1 = fileName.lastIndexOf("."); // 得到一个索引值
				let index2 = fileName.length;
				let type = fileName.substring(index1, index2);
				//如果是app走这里
				if ((type.indexOf('jpg') > -1 || type.indexOf('jpeg') > -1 || type.indexOf('png') > -1) && this
					.currentSystem == 'android') {
					console.log('安卓的图片打开', url)
					uni.previewImage({
						current: 0,
						urls: [url],
						background: '#ffffff'
					});
					uni.hideLoading();
				} else {
					let that = this;
					//#ifdef APP-PLUS
					console.log('安卓的其他文件和ios所有', type)
					that.openFile(url, type); // 这个方法是可以应用在app端的文件打开方式
					//#endif

					//#ifdef H5
					// 如果是H5走这里
					if (type.indexOf("doc") > -1 || type.indexOf("docx") > -1 || type.indexOf("pdf") > -1) {
						that.previewFile(fileName, type);
					} else if (type.indexOf("jpg") > -1 || type.indexOf("jpeg") > -1 || type.indexOf("png") > -1) {
						that.openFile(url, type); // h5端打开图片也用这个居然不影响？而且不用另外打开一个页面预览
					} else {
						window.open(url, '_blank');
						window.location.assign(url); // 这里是双重保障  一行就够了
						uni.hideLoading();
					}
					//#endif
				}
},

openFile(url, type) {
				let times = Date.parse(new Date()); //拼接时间戳
				let that = this;
				uni.downloadFile({
					url: url + '?code=' + times,
					success: function(res) {
						var filePath = res.tempFilePath;
						if (type.indexOf('jpg') > -1 || type.indexOf('jpeg') > -1 || type.indexOf('png') >
							-1) {
							console.log('图片打开', url)
							//如果是图片走这里
							uni.previewImage({
								current: 0,
								urls: [url],
								background: '#ffffff'
							})
						} else {
							//如果是文件走这里
							uni.openDocument({
								filePath: filePath,
								success: (res) => {
									console.log('成功打开文档')
								},
								fail: (res) => {
									uni.showToast({
										icon: 'none',
										title: '文件打开失败',
										duration: 2000
									})
								}
							})
						}
						uni.hideLoading();
					}
				});
},

previewFile(file, type) {
				let that = this
				if (type.indexOf('docx') > -1 || type.indexOf('doc') > -1) {
					that.requestGetWorkLook("/download/resource2?fileName=" + file, null, (res) => {
						if (res) {
							let fileUrl = file.split('.')
							let baseFile =
								fileUrl[0].indexOf('/api') !== -1 ?
								fileUrl[0] + '.pdf' :
								getApp().globalData.baseUrl + fileUrl[0] + '.pdf'
							that.getFilePath(baseFile)
							uni.hideLoading();
						} else {
							uni.showModal({
								content: "文件返回失败",
								icon: "none"
							})
						}
					})
				} else if (type.indexOf('pdf') > -1) {
					let baseFile = getApp().globalData.baseUrl + file;
					that.getFilePath(baseFile)
					uni.hideLoading();
				}
},

getFilePath(filePath) {
				// 获取文件路径
				let srcFile = ""
				let that = this;
				// 这个是调用后端接口，返回值是文件流
				that.requestGetWorkLook("/download/resource2?fileName=" + filePath, null, (res) => {
					if (res) {
						let fileUrl = filePath.split('.')
						let baseFile =
							fileUrl[0].indexOf('/api') !== -1 ?
							fileUrl[0] + '.pdf' :
							getApp().globalData.baseUrl + fileUrl[0] + '.pdf'
						let pdfData = res;
						// 因为能走到这个方法的都是h5端，所以使用Blob也没关系
						let blob = new Blob([pdfData], {
							type: 'application/pdf;charset=UTF-8'
						})
						pdfData = window.URL.createObjectURL(blob)
						srcFile = encodeURIComponent(pdfData)
						if (srcFile) {
							// 这一段写了两个判断，从网上看的，我也不知道为什么，以防万一吧……
							// #ifdef H5
                                // 向文件预览页传递地址
							uni.navigateTo({
								url: `/pages/WebView/index?srcFile=${srcFile}`
							});

							// #endif
							// #ifndef H5
							uni.navigateTo({
								url: `/pages/WebView/index?srcFile=${srcFile}`
							});
							// #endif

						}
					} else {
						uni.showModal({
							content: "文件返回失败",
							icon: "none"
						})
					}
				})
},

然后WebView页面是作为h5端word，pdf文件预览页，用到了pdf.js插件（也就是从网上下载了文件包）页面内容如下：

<template>
	<view>
		<web-view width="100%" height="100%" :src="srcFile"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				viewerUrl: '/hybrid/html/build/generic/web/viewer.html', // 下载的文件包中的文件路径
				srcFile: ""
			}
		},
		onLoad(options) {
			if (options && options.srcFile) {
				this.srcFile = this.viewerUrl + '?file=' + options.srcFile
			}
		}
	}
</script>

<style>
</style>

下载的pdf插件目录结构：