修改下载图片，增加一个download引入文件用以兼容IE

index.html

@@ -17,6 +17,7 @@
     	<router-view></router-view>
     </div>
     <script src="https://unpkg.com/qiniu-js@2.2.0/dist/qiniu.min.js"></script>
+    <script src="https://cdn.bootcss.com/downloadjs/1.4.8/download.min.js"></script>
     <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
   </body>
 </html>

src/views/patients/new-manage/components/qr-code-import.vue

@@ -10,7 +10,7 @@
       <div class="qr-group">
         <p class="label-name">二维码分组：</p>
         <template v-for="(labelItem, index) in labelsInfoList">
-          <el-tag size="small" :key="index">{{labelItem.labelName}}</el-tag> 
+          <el-tag size="small" :key="index">{{labelItem.labelName}}</el-tag>
         </template>
         <el-tag size="small" class="choose-group" @click="handleChooseGroup">+ 选择分组</el-tag>
       </div>
@@ -19,10 +19,10 @@
           <div class="pic">
             <canvas id="msg"></canvas>
             <el-button icon="el-icon-download" class="qr-download-btn" @click="handleQRDownloadModal">下载二维码</el-button>
-          </div>  
+          </div>
           <p class="time-limit">有效期：{{qrCodeInfo.beginTime}}-{{qrCodeInfo.endTime}} </p>
           <el-button icon="el-icon-refresh" class="refresh-btn" size="small" @click="handleRefreshCode">刷新有效期</el-button>
-        </div>  
+        </div>
       </div>
       <div class="border-space"></div>
       <div class="increased-steps-wrap">
@@ -58,6 +58,7 @@
       <span slot="footer" class="dialog-footer">
         <el-button @click="handleCloseChooseLabelModal" size="small">取 消</el-button>
         <el-button type="primary" @click="handleAfterChooseLabel" size="small">{{showDownloadQRModal == false ? '确 定' : '确定下载'}}</el-button>
+        <a :href="imgHref" ref="downLoadBtn" id="downLoadBtn" download="二维码.png"></a>
       </span>
     </el-dialog>
     <!-- 重新加载当前分组列表 -->
@@ -77,6 +78,7 @@
 </template>
 
 <script>
+
   import QRCode from 'qrcode';
   import {
     getQRCode,
@@ -90,6 +92,7 @@
     name: "qrCodeImport",
     data() {
       return {
+        imgHref: '',
         showChooseLabelModal: false,
         showReloadLabelModal: false,
         showDownloadQRModal: false,   //下载二维码弹窗时， 是否隐藏“选择分组”里的分组管理部分
@@ -207,7 +210,7 @@
       },
       handleChooseGroup() {
         // debugger;
-        this.showDownloadQRModal = false;  
+        this.showDownloadQRModal = false;
         // 回显已经选择的label
         this.choosedLabelList = this.currentLabelList;
         this.goToGetGroupList();
@@ -235,14 +238,14 @@
         })
       },
       handleQRDownloadModal() {
-        this.showDownloadQRModal = true;   
+        this.showDownloadQRModal = true;
         // 回显已经选择的label
         this.choosedLabelList = this.currentLabelList;
         this.goToGetGroupList();
       },
       handleAfterChooseLabel() {
-        console.log('this.choosedLabelList ', this.choosedLabelList)
-        console.log('this.choosedLabelList ', this.choosedLabelList.join(','))
+//        console.log('this.choosedLabelList ', this.choosedLabelList)
+//        console.log('this.choosedLabelList ', this.choosedLabelList.join(','))
         if( this.showDownloadQRModal == false ){  // 选择分组时
           this.showChooseLabelModal = false;
           this.goToGetQRCode({
@@ -253,7 +256,7 @@
         }else{  // 下载二维码时
           // 获取最新二维码参数，但不影响之前的二维码参数
           this.goToGetQRCode({
-            labelIds: this.choosedLabelList.join(','), 
+            labelIds: this.choosedLabelList.join(','),
             id: '',
             first: false,
             justDownload: true,
@@ -308,8 +311,68 @@
         this.goToGetGroupList();
       },
       downloadFile(src) {
-        let newTab=window.open('about:blank');
-        newTab.location = src;
+//        console.log('准备下载',src)
+        this.downLoadHandle(src);
+      },
+      downLoadHandle(src){
+        let blobToDataURI = (blob, callback) => {
+          var reader = new FileReader();
+          reader.onload = (e) => {
+            callback(e.target.result);
+          }
+          reader.readAsDataURL(blob);
+        };
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', src, true);
+        xhr.responseType = "blob";
+        xhr.onload = () => {
+          if (xhr.status == 200) {
+            var blob = xhr.response;
+            var img = document.createElement("img");
+            img.onload = (e) => {
+              window.URL.revokeObjectURL(img.src);
+            };
+            img.src = window.URL.createObjectURL(blob);
+            blobToDataURI(blob, (data)=> {
+//              console.log(img)
+//              console.log(data)
+              document.getElementById('downLoadBtn').setAttribute('href',data);
+              this.imgHref = data;
+              if (this.myBrowser()==="IE" || this.myBrowser()==="Edge"){
+//          window.event.preventDefault();
+                window.event.returnValue = false;
+                window.download(this.imgHref,"二维码.png","image/png")
+              }
+              this.$refs.downLoadBtn.click();
+              // 如果是IE浏览器
+
+            })
+          }
+        }
+        xhr.send();
+      },
+      // 判断浏览器类型
+      myBrowser(){
+        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
+        var isOpera = userAgent.indexOf("Opera") > -1;
+        if (isOpera) {
+          return "Opera"
+        }; //判断是否Opera浏览器
+        if (userAgent.indexOf("Firefox") > -1) {
+          return "FF";
+        } //判断是否Firefox浏览器
+        if (userAgent.indexOf("Chrome") > -1){
+          return "Chrome";
+        }
+        if (userAgent.indexOf("Safari") > -1) {
+          return "Safari";
+        } //判断是否Safari浏览器
+        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
+          return "IE";
+        }; //判断是否IE浏览器
+        if (userAgent.indexOf("Trident") > -1) {
+          return "Edge";
+        } //判断是否Edge浏览器
       }
     },
   }