vue app手机端实现pdf、图片在ios或者安卓端预览下载功能

原创已于 2022-11-17 11:27:22 修改 · 5.2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端框架 #前端

于 2022-05-10 15:59:34 首次发布

Vue 同时被 3 个专栏收录

198 篇文章

订阅专栏

前端开发

140 篇文章

订阅专栏

javascript

66 篇文章

订阅专栏

本文介绍了如何在手机端App中实现PDF和图片的在线预览及下载功能，通过调用iOS和Android原生方法。示例代码展示了在Vue中如何根据文件类型决定预览方式，包括调用Android和iOS的特定方法。同时提供了样式和交互细节，如图片尺寸和预览按钮的点击事件。

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

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