uniapp WeChat, archivos de vista previa de Android

sitio web oficial del archivo de descarga de uniapp sitio web oficial de uni-app

pregunta

wx.descargarArchivo

Solución al problema de que el subprograma WeChat wx.downloadFile no muestra los datos del archivo está vacío en el iPhone

Las herramientas de desarrollo de Android y WeChat usan downloadFile normalmente, pero falla en el sistema ios. Después de muchas pruebas, se descubrió que el contenido del archivo cargado estaba vacío, por lo que falló, por lo que siempre que el tamaño del archivo sea mayor que 0 KB , estará bien y downloadFile se realizará correctamente.

uni.openDocumento

Cuando el subprograma WeChat usa wx.openDocument para abrir un archivo, falla el tipo de archivo no admitido.

Parámetro fileType tipo de archivo, especifique el tipo de archivo para abrir el archivo, los valores válidos son doc, xls, ppt, pdf, docx, xlsx, pptx , el subprograma Alipay solo admite pdf

componente principal

<!-- 附件 -->
		<view class="margin-top">
			<file-table ref="filetable"></file-table>
		</view>
  
  
<script>
	import FileTable from "@/packagetask/pages/components/FileTable.vue";
 export default {

	
		components: {
			FileTable,
		},
 		mounted() {
			// this.$refs.filetable.initTable(this.idString, 'todo');
		},
</script>

 Subcomponente FileTable.vue

<template>
	<view>
		<!-- 附件显示 -->
		<view class="" v-if="tableData.length > 0">
			<view v-if="tableData.length > 0" class="text-center padding-tb-sm">--- 附件 ---</view>
			<view v-for="item in tableData" class="cu-form-group text-center grid ">
				<view class="fileimgname" @click="ViewImage(item)">
					<image v-if="item.isShowImg" class="fileimg margin-right-xs" :src="BASE_URL+item.filePath" mode=""
						@error="imageError(item)">
					</image>
					<view :class="item.isShowImg ? 'filename':'filename2' ">
						{
   
   {item.name}}
					</view>
				</view>
				<view class="filedown">
					<a harf="#" style="color: #0081FF;" @click="BeforeDownload(item)">
						下载
						<view class="filesize">
							（{
   
   { parseFloat(item.sizeM) > 1 ? (parseFloat(item.sizeM).toFixed(2)+'M') : (parseFloat(item.sizeM
						*
						1024).toFixed(2) +'KB')}}）
						</view>
					</a>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config.js'
	export default {
		data() {
			return {
				BASE_URL: config, //配置路径
				tableData: [],
				isR: false,
			}
		},
		onLoad: () => {},
		methods: {
			// 图片预览
			ViewImage(item) {
				console.log('预览ViewImage', item, item.isShowImg)
				if (item.isShowImg) {
					var url = encodeURI(this.baseurl + item.filePath)
					uni.previewImage({
						urls: [url],
						current: url
					});
				} else {

					console.log(2);
					// // 当微信小程序配置了有域名且备案后的https路径时，用这个方法安卓，微信直接预览
					// uni.navigateTo({
					// 	url: '../../../pages/webview/pdfview?fileUrl=' + item.filePath,
					// 	fail: (err) => {
					// 		console.log(err);
					// 		uni.showToast({
					// 			title: '该文件不支持预览，请下载查看！',
					// 			icon: 'none'
					// 		})
					// 	},
					// })

					//#ifdef APP-PLUS  
					// //安卓app直接下载预览
					// this.download(item.filePath, item.name,item);
					uni.navigateTo({
						url: '../../../pages/webview/pdfview?fileUrl=' + item.filePath,
						fail: (err) => {
							console.log(err);
							uni.showToast({
								title: '该文件不支持预览，请下载查看！',
								icon: 'none'
							})
						},
					})
					// #endif  

					//#ifdef MP-WEIXIN 
					if (item.size > 0) {
						uni.downloadFile({
							url: encodeURI(this.baseurl + item.filePath), //下载地址接口返回
							success: (data) => {
								if (data.statusCode == 200) {
									console.log(data, data.tempFilePath)
									uni.openDocument({
										filePath: data.tempFilePath,
										fileType: item
											.fileType, //wx文件类型 有效值 doc, xls, ppt, pdf, docx, xlsx, pptx
										showMenu: true, //wx右上角是否有可以转发分享的功能
										success: function(res) {
											console.log('打开文档成功', res);
										},
										fail: function(res) {
											console.log('打开文档失败', res);
											uni.showToast({
												icon: 'none',
												title: '打开失败,请前往安卓app下载，或电脑端下载！',
											});
										}
									});
								}
							},
							fail: (err) => {
								console.log(err);
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '打开文档失败',
								});
							},
						});
					} else {
						console.log('item.size', item.size);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '文件为空，打开文档失败',
						});
					}
					// #endif  
				}
			},
			// 初始化数据
			initTable(id, status) {
				if (status && id) {
					console.warn(`文件模块接收到参数id:${id},status:${status}`);
				} else {
					console.error(`文件模块缺少必要的参数:id或status`);
					return;
				}
				// 判断status
				switch (status) {
					case "start" || "add":
						this.isR = true;
						break;
					case "edit":
						this.isR = true;
						break;
					default:
						this.isR = false;
						break;
				}
				this.$http
					.get(`/hr/cultivate/cultivateInformation/fileList?attributionId=${id}`)
					.then(res => {
						if (res.data.success) {
							//赋值到this.tableData-->显示
							// console.log(res.data.list);
							res.data.list.forEach((e, i) => {
								// console.log(e);
								e.sizeM = (Number(e.size) / 1024 / 1024).toFixed(3);
								const reg = /.+\./;
								const fileType = e.name.replace(reg, "");
								// console.log(fileType);
								e.fileType = fileType;
								e.isShowImg = true;
							});

							this.tableData = res.data.list;
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 点击下载按钮，下载文件前做判断是微信还是安卓，微信图片只能预览长按保存，文件只能打开doc, xls, ppt, pdf, docx, xlsx, pptx
			BeforeDownload(item) {

				//#ifdef APP-PLUS  
				this.download(item.filePath, item.name, item);
				// #endif  

				//#ifdef MP-WEIXIN 
				console.log('是否预览图片', item, item.isShowImg)
				if (item.isShowImg) {
					this.ViewImage(item)
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '长按图片可保存',
					});
				} else if (item.size > 0) {
					this.download(item.filePath, item.name, item);
				} else {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '文件为空，下载文件失败，请前往安卓app下载，或电脑端下载！',
					});
				}
				// #endif  

			},
			// 下载
			download(url, name, item) {
				console.log(url, name, 111);

				uni.downloadFile({
					url: encodeURI(this.baseurl + url), //下载地址接口返回
					success: (data) => {
						if (data.statusCode == 200) {
							console.log(data, data.tempFilePath)

							//文件保存到本地
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									console.log('res', res)
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件已保存：' + res.savedFilePath, //保存路径
										duration: 3000,
									});
									//打开文件
									setTimeout(function() {
										//#ifdef APP-PLUS  
										uni.openDocument({
											filePath: res.savedFilePath,
											// success: function(res) {
											// 	console.log('打开文档成功');
											// },
											complete: function(res) {
												console.log('打开文档complete',
													res,res.errMsg.indexOf('ok'));
												if (res.errMsg.indexOf('ok') !=
													-1) {
													console.log('打开文档成功');
												} else {
													console.log('打开文档失败');
													uni.showToast({
														icon: 'none',
														title: '打开文档失败,请前往电脑端下载！',
													});
												}
											}
										});
										// #endif  

										//#ifdef MP-WEIXIN  

										uni.openDocument({
											filePath: res.savedFilePath,
											fileType: item.fileType, //wx文件类型 有效值 doc, xls, ppt, pdf, docx, xlsx, pptx
											showMenu: true, //wx右上角是否有可以转发分享的功能
											success: function(res) {
												console.log('打开文档成功', res);
											},
											fail: function(res) {
												console.log('打开文档失败', res);
												uni.showToast({
													icon: 'none',
													title: '打开失败,请前往安卓app下载，或电脑端下载！',
												});
											}
										});
										// #endif  
									}, 1000)

								},
								fail: function(res) {
									console.log('文档保存失败');
								}
							});
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
			},
			// 图片加载失败
			imageError(item) {
				console.log("item", item)
				item.isShowImg = false;
			},
		}
	}
</script>

<style scoped>
	.cu-form-group {
		flex-wrap: nowrap;
		padding: 10rpx 40rpx;
	}

	.fileimgname {
		display: flex;
		align-items: center;
		width: 80%;
	}

	.fileimg {
		width: 1rem;
		height: 1rem;
	}

	.filename {
		width: calc(100% - 1rem - 10rpx);
		word-wrap: break-word;
		text-align: start;
	}

	.filename2 {
		width: calc(100% - 10rpx);
		word-wrap: break-word;
		text-align: start;
	}

	.filedown {
		/* width: 2rem; */
	}

	.filesize {
		font-size: 0.8rem;
		color: #000;
	}
</style>