admin管理员组

文章数量:1545253

需求：手机端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;
}

发文不易，点赞、评论、收藏、关注支持一下呗！

本文标签： 功能手机图片appvue

版权声明：本文标题：vue app手机端实现pdf、图片在ios或者安卓端预览下载功能 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1727156816a1099596.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。