【兼容iOS和安卓】H5 PDF预览，下载及批量下载功能

判断是否在微信中运行

// 是否在微信中运行
is_weixin() {
  this.isWeixinFlag = false;
  let ua = navigator.userAgent.toLowerCase();
  console.log(ua,ua.match(/MicroMessenger/i) == "micromessenger")
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    this.isWeixinFlag = true;
  } else {
    this.isWeixinFlag = false;
  }
}

一.pdf预览

html代码：

<span class="review" @click.stop="handleReview(item)">预览</span>
<van-popup v-model="pdfSrcFlag" :style="{ width: '80%' }">
    <pdf :src="pdfSrc"></pdf>
</van-popup>

js代码：

// 预览

import pdf from 'vue-pdf'
handleReview(item){
  let url = item.ossurl.split('://')[1];
  this.pdfSrc = `${location.protocol}//${url}`;
  this.pdfSrcFlag = true;
}

二.pdf下载

html代码：

<span class="upload" @click.stop="handleUpload(item)">下载</span>

js代码：

// 下载
handleUpload(item){
  // 在微信中操作
  this.is_weixin();
  if(this.isWeixinFlag){
    return;
  }
  // 在浏览器中操作
  let ua = navigator.userAgent.toLowerCase();
  if(ua&&ua.includes("mac")) {   //ios终端
      window.location.href = item.ossurl;
  }else{
    window.open(item.ossurl);
  }
}

三.pdf批量下载

html代码：

<van-button class="btn" type="info" @click="download">批量下载</van-button>

js代码：

 
import FileSaver from 'file-saver'
import JSZip from 'jszip'

// 批量下载
download() {
 // 在微信中操作
 this.is_weixin();
 if(this.isWeixinFlag){
   return;
 }
 // 在浏览器中操作
 let that = this;
 var blogTitle = `质检报告压缩文件`; // 下载后压缩包的命名
 var zip = new JSZip();
 var promises = [];
 let cache = {};
 let arrImg = [];
 this.checked.forEach((res,i)=>{
   let url = res.ossurl.split('://')[1];  
   arrImg.push({
     path: `${location.protocol}//${url}`, // 文件链接
     name: res.fileName // 文件名称
   });
 })
 for (let item of arrImg) {
   // item.path为文件链接地址
   const promise = this.getImgArrayBuffer(item.path).then((data) => {
     // 下载文件, 并存成ArrayBuffer对象(blob)
     zip.file(item.name, data, { binary: true }); // 逐个添加文件
     cache[item.name] = data;
   });
   promises.push(promise);
 }
 Promise.all(promises).then(() => {
   zip.generateAsync({ type: "blob" }).then((content) => {
     // 生成二进制流
     FileSaver.saveAs(content, blogTitle); // 利用file-saver保存文件  自定义文件名
   });
 }).catch((res) => {
   that.$toast('文件压缩失败')
 });
},
//文件以流的形式获取（参数url为文件链接地址）
getImgArrayBuffer(url) {
 let that = this;
   return new Promise((resolve, reject) => {
     //通过请求获取文件blob格式
     let xmlhttp = new XMLHttpRequest();
     xmlhttp.open("GET", url, true);
     xmlhttp.responseType = "blob";
     xmlhttp.onload = function (){
       if (this.status == 200) {
         resolve(this.response);
       } else {
         that.$toast('文件压缩失败')
         reject(this.status);
       }
     };
     xmlhttp.send();
   });
}