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: '失败请重新下载',
						});
					},
				});
			},
相关推荐
老家的回忆29 分钟前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
Vertira35 分钟前
pdf 合并 python实现(已解决)
前端·python·pdf
牧杉-惊蛰37 分钟前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
黄瓜沾糖吃2 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟2 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
浩龙不eMo2 小时前
✅ Lodash 常用函数精选(按用途分类)
前端·javascript
爱分享的程序员2 小时前
前端面试专栏-算法篇:17. 排序算法
前端·javascript·node.js
pe7er3 小时前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
pe7er3 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
islandzzzz3 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html