修改下载图片，增加一个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

@@ -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,   //下载二维码弹窗时， 是否隐藏“选择分组”里的分组管理部分
@@ -241,8 +244,8 @@
         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({
@@ -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浏览器
       }
     },
   }