fix:证书格式修改为pdf

src/modules/cert/views/Index.vue

@@ -10,9 +10,13 @@
       />
     </div>
     <div class="cert" v-if="data.length">
-      <el-button type="primary" @click="downImg">证书下载</el-button>
-      <div class="img">
-        <img :src="item.url" :key="index" alt="" v-for="(item, index) in data" />
+      <div class="home-box-content" :key="index" alt="" v-for="(item, index) in data">
+        <a :href="item.url" :download="item.url" target="_blank">
+          <el-button round class="btn" type="primary">证书下载</el-button>
+        </a>
+        <div class="home-box-content-list">
+          <embed data-v-2e21b479="" width="100%" height="100%" :src="item.url" class="embed" />
+        </div>
       </div>
     </div>
   </app-container>
@@ -40,50 +44,28 @@ export default {
         this.data = response.data || []
       }
     })
-  },
-  methods: {
-    downImg() {
-      this.data.forEach((item, index) => {
-        // window.open(item.url)
-        setTimeout(() => {
-          this.downImg2(item.url, index)
-        }, index * 1000)
-      })
-    },
-    downImg2(url, name) {
-      const image = new Image()
-      image.setAttribute('crossOrigin', 'anonymous')
-      image.src = url
-      image.onload = () => {
-        const canvas = document.createElement('canvas')
-        canvas.width = image.width
-        canvas.height = image.height
-        const ctx = canvas.getContext('2d')
-        ctx.drawImage(image, 0, 0, image.width, image.height)
-        canvas.toBlob(blob => {
-          const url = URL.createObjectURL(blob)
-          this.download(url, name)
-          // 用完释放URL对象
-          URL.revokeObjectURL(url)
-        })
-      }
-    },
-    download(href, name) {
-      const eleLink = document.createElement('a')
-      eleLink.download = name
-      eleLink.href = href
-      eleLink.click()
-      eleLink.remove()
-    }
   }
 }
 </script>
 <style lang="scss" scoped>
-.img {
-  width: 80%;
-  img {
+.home-box-content {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  flex-direction: column;
+  padding: 20px 0 20px 0;
+  .home-box-content-btn {
+    align-self: flex-end;
+    .btn {
+      background: #a81a42;
+      color: #fff;
+      width: 150px;
+      height: 50px;
+    }
+  }
+  .home-box-content-list {
     width: 100%;
-    display: block;
+    height: 500px;
     margin-top: 20px;
   }
 }