当前位置：首页 > news >正文

uniapp 微信小程序判断数据返回的是jpg还是pdf，以及pdf预览

news 2025/8/27 14:39:36

<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

<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>