需求:手机端App实现pdf、图片在线预览下载功能,当前调用ios或者安卓提供的方法实现。
效果图:
代码实现:
<div class="flex align-items just-cont m20">
<div class="flex align-items">
<img :src="invoiceUrlType!='pdf'?$baseImgUrl+dedutionObj.invoiceUrl:pdfUrl" class="leviedImg">
</div>
<div class="previewTxt" @click="lookShipImg">预览</div>
</div>
data(){
return {
invoiceUrlType:"",
pdfUrl:"",
}
}
根据接口获取pdf或者图片地址显示 :
getDetail(invoiceId){
verificationApplicationInfo({invoiceId}).then(res=>{
if(res.code == 200){
......
this.invoiceUrl = res.data.invoiceUrl;
this.invoiceUrlType = res.data.invoiceUrl.split('.')[1];
......
}else{
this.$toast(res.msg);
}
})
}
重点:根据ios或者安卓分别去调用相应的方法体来跳转第三方实现预览下载。方法体根据自己的需求调用实现,过程是一样的。本项目是调用的ios或者安卓提供的方法来实现。
// 预览合同发票
lookShipImg() {
if(this.invoiceUrl.split(".")[1]=="pdf"){
// pdf文件类型
if (this.$utils.isEmpty(this.invoiceUrl)) {
this.downloadPDF("合同发票",this.$route.query.invoiceId);
}else{
if (this.$utils.isAndroid_ios() == "andriod") {
window.AndroidFunction.getPdfUrl(
"合同发票",
this.$baseImgUrl + this.invoiceUrl
);
}
if (this.$utils.isAndroid_ios() == "ios") {
window.webkit.messageHandlers.callNative.postMessage({
name: "下载PDF",
data: {
name: "合同发票",
url: this.$baseImgUrl + this.invoiceUrl,
},
});
}
}
}else{
//图片类型
ImagePreview({
images: this.invoiceUrl.split(",").map(item=>this.$baseImgUrl+item),
showIndex: false,
loop: false,
startPosition: 0
});
}
},
.leviedImg{
width: 74px;
height: 80px;
}
.previewTxt{
color:#0050E9;
font-size: 28px;
}
发文不易,点赞、评论、收藏、关注支持一下呗!