<template>
<view class="approval-notice">
<block v-for="(imgItem, idx) in drivingLicense" :key="idx">
//如果是非图片,那就走pdf预览
<view class="pdf-item" v-if="Object.keys(thumbnail).includes(getFileType(imgItem))" @click="handlePreview(idx,drivingLicense)">
<image src="../static/pdf-icon.png" mode="aspectFill"></image>
<text class="text">{{getFileName(imgItem)}}</text>
</view>
//如果是图片,那就走图片预览
<view class="img-item" v-else @click="handlePreview(idx,drivingLicense)">
<image :src="imgItem" mode="aspectFill"></image>
<text class="text">{{getFileName(imgItem)}}</text>
</view>
</block>
</view>
</template>
data() {
return {
//数据返回的文件列表(↓↓包含以下格式↓↓)
drivingLicense:['https://www.baidu.com/5cf22168b26b0_20230720114248A003.jpg','https://www.baidu.com/5cf22168b26b0_20230720114278A003.jpg'],
fileTypeLimit:['png', 'jpg', 'jpeg', 'pdf'],//仅支持这些格式
thumbnail:{
pdf: '',
apk: '',
mp4: ''
}
}
}
methods: {
//获取文件后缀名
getFileType(fileName, isUserType = false) {
if (!isUserType) {
return fileName.split('.').pop().toLowerCase()
} else {
return fileName.split('/').pop().toLowerCase()
}
},
//获取文件名
getFileName(url){
return url.split('/').pop();
},
//预览
handlePreview(index,list){
const fileType = this.getFileType(list[index])
//如果是不支持的文件类型或者是需要代替的缩略图的类型,则新标签页打开显示
if (Object.keys(this.thumbnail).includes(fileType) || !this.fileTypeLimit.includes(fileType)) {
uni.navigateTo({
//跳转到pdf.vue页面
url:"/packageProjectList/pdf/pdf?url="+list[index]
})
}else{
//图片预览已经在其他文章中有例子
this.$common.previewImage(index,list)
}
},
}
pdf.vue文章来源地址https://www.toymoban.com/news/detail-632801.html
<template>
<view>
<web-view :src="webViewSrc"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
webViewSrc:''
}
},
onLoad(option) {
this.webViewSrc = option.url;
},
methods: {
}
}
</script>
<style>
</style>
文章来源:https://www.toymoban.com/news/detail-632801.html
到了这里,关于uniapp 微信小程序 判断数据返回的是jpg还是pdf,以及pdf预览的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!