下载图片修改

src/pages/home/queryCard.vue

@@ -6,10 +6,10 @@
         <div v-for="(item, index) in cardListMap" :key="index" class="home-box-content">
           <div class="home-box-content-btn">
             <el-button round class="btn" @click="handlePrint(item)">打印</el-button>
-            <a :href="item.download_info.url" :download="item.download_info.filename" target="_blank"
+            <!-- <a :href="item.download_info.url" :download="item.download_info.filename" target="_blank"
               ><el-button round class="btn">下载</el-button></a
-            >
-            <!-- <el-button round class="btn" @click="handleDownload(item)">下载</el-button> -->
+            > -->
+            <el-button round class="btn" @click="handleDownload(item)">下载</el-button>
           </div>
           <div class="home-box-content-list">
             <img class="home-box-content-img" :src="item.download_info.url" alt="" />
@@ -27,7 +27,7 @@
 <script>
 import printJS from 'print-js'
 import action from '@action'
-
+import downloadIamge from '@tool/downloadPng'
 export default {
   data() {
     return {
@@ -51,11 +51,12 @@ export default {
     // 打印
     handlePrint(item) {
       printJS(item.download_info.url, 'image')
-    }
+    },
     // 下载
-    // handleDownload(item) {
-    //   window.open(item.download_info.url, '_blank')
-    // }
+    handleDownload(item) {
+      downloadIamge(item.download_info.url, item.download_info.filename)
+      // window.open(item.download_info.url, '_blank')
+    }
   },
   mounted() {
     // 获取证书

src/tool/downloadPng.js

+function downloadIamge(imgsrc, name) {
+  // 下载图片地址和图片名
+  var image = new Image()
+  // 解决跨域 Canvas 污染问题
+  image.setAttribute('crossOrigin', 'anonymous')
+  image.onload = function() {
+    const canvas = document.createElement('canvas')
+    canvas.width = image.width
+    canvas.height = image.height
+    const context = canvas.getContext('2d')
+    context.drawImage(image, 0, 0, image.width, image.height)
+    const url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
+    const a = document.createElement('a') // 生成一个a元素
+    const event = new MouseEvent('click') // 创建一个单击事件
+    a.download = name || 'photo' // 设置图片名称
+    a.href = url // 将生成的URL设置为a.href属性
+    a.dispatchEvent(event) // 触发a的单击事件
+  }
+  image.src = imgsrc
+}
+export default downloadIamge