uniapp判断是图片还是pdf,如果是pdf则进行下载预览

一、附件中有图片也有pdf,需要进行预览,图片可直接预览,而pdf是下载后再预览

二、主要代码

javascript 复制代码
<view class="fj-row" v-for="(item,index) in formDetail.attachmentRespVOS" :key="index">
		<view class="drow" @click="preViewImg2(item)">			
		    <view class="fjtitle">{{item.title}}</view>
		</view>
		<view class="fj-line"></view>
</view>
javascript 复制代码
//预览图片
			preViewImg2(row){			
				var imgArr = [];
				//给整个数组的文件列表都加上api
				for (var i = 0; i < this.formDetail.attachmentRespVOS.length; i++) {
					imgArr[i] = config.imgBaseUrl + this.formDetail.attachmentRespVOS[i].fileUrl
				}
				var nowUrl=config.imgBaseUrl+row.fileUrl;//当前的预览路径
				var arr1 = nowUrl.split(".");
				var len1=arr1.length-1;
				var type1=arr1[len1];
				if(type1=='pdf'){
					this.Download(nowUrl)
				}else{
					uni.previewImage({
						current: nowUrl,
						urls: imgArr
					})
				}
			},
javascript 复制代码
//下载
			Download(urls) {
				uni.downloadFile({
					url: urls,//下载地址接口返回
					success: (data) => {
						if (data.statusCode === 200) {
							//文件保存到本地
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									uni.showToast({
										icon:'loading',
										mask: true,
										title: '正在下载中...', //保存路径
										duration: 2000,
									});
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {
												// console.log('打开文档成功');
											}
										});
									}, 2000)
								}
							});
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
			},
相关推荐
灵感__idea13 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
VB5942 小时前
《考研 考证 各学科 各专业 思维导图汇总》PDF 5.2GB
考研·pdf
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
源码_V_saaskw3 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam4 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8504 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的6 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀6 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce7 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript