uniapp微信小程序预览文档功能笔记

uniapp微信小程序预览文档功能

本文档主要预览doc|docx|xls|xlsx|ppt|txt|pdf，

此代码为台账管理中的文件，具体循环列表依据实际情况。

<uni-list v-for="item in list" :key="item.ossId">
	<uni-list-item :title="item.originalName" v-if="item.directoryType==1" link
	:thumb="item.url" @click="openOther(item.originalName,item.url)" showArrow />
</uni-list>

methods:{
			//台账管理中文档预览功能typeNname为文件名称，包含文件后缀.doc,val值为文件链接
			openOther(typeName, val) {
				const imgFormat = /\.(jpg|jpeg|png|gif)$/; //图片格式匹配
				const documentFormatRegex = /\.(doc|docx|xls|xlsx|ppt|txt|pdf)$/i; //文件格式
				if (imgFormat.test(typeName)) {
					this.imageurl = val
					this.$refs.popup.open('center')
				} else if (documentFormatRegex.test(typeName)) {
					//文件预览功能微信预览需要先下载
					uni.downloadFile({
						url: val,
						success: function(res) {
							uni.hideLoading();
							var filePath = res.tempFilePath;
							//文件保存到本地
							uni.saveFile({
								tempFilePath:filePath, //临时路径
								success: function(res) {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件已保存：' + res.savedFilePath, //保存路径
										duration: 3000,
									});
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {
												// console.log('打开文档成功');
											}
										});
									}, 1000)
								}
							});
						},
						fail: function(err) {
							uni.hideLoading();
						}
					});
				} else {
					this.$modal.msg("该格式无法打开")
				}

			}
}