证书处理完毕

package.json

@@ -45,6 +45,7 @@
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
+    "html2canvas": "^1.4.1",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",

src/assets/styles/myTable.scss

@@ -197,3 +197,51 @@
     margin-top: 30px;
   }
 }
+
+// 电子证书
+.zs-box {
+  height: 450px;
+  width: 300px;
+  position: relative;
+  background: url("~@/assets/images/zs.jpg");
+  background-size: 100% 100%;
+  .zs-z {
+    position: absolute;
+    bottom: 10%;
+    right: 10%;
+    border: 1px solid red;
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+    overflow: hidden;
+    background: url("~@/assets/images/z.png");
+    background-size: 100% 100%;
+  }
+  .top-text {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    font-size: 14px;
+    transform: translateX(-50%);
+    z-index: 10;
+    span {
+      display: inline-block;
+      width: 60px;
+      text-align: center;
+      border-bottom: 1px solid #333;
+    }
+  }
+  .bottom-text {
+    position: absolute;
+    bottom: 10%;
+    right: 10%;
+    z-index: 10;
+    .lable-value {
+      margin-bottom: 3px;
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+}

src/views/volunteer/gxhzs/gxhzsff/index.vue

@@ -194,7 +194,38 @@
             <img src="@/assets/images/huodong.png" alt="" />
             <span>电子证书</span>
           </div>
-          <div class="info"></div>
+          <div class="info zs-box" ref="zs">
+            <div class="top-text">
+              <span>{{ form.userName }}</span> 先生/女士：
+              <p>
+                您在苏州工业园区累计志愿服务0小时，感谢您的无私奉献，特发此证，以兹鼓励。
+              </p>
+            </div>
+            <div class="bottom-text">
+              <div class="lable-value">
+                <div class="lable">签发单位：</div>
+                <div class="value">苏州工业园区宣传和统战部</div>
+              </div>
+              <div class="lable-value">
+                <div class="lable"></div>
+                <div class="value">苏州工业园区新时代文明实践中心</div>
+              </div>
+              <div class="lable-value">
+                <div class="lable"></div>
+                <div class="value">
+                  {{ $moment().format("YYYY年MM月DD日") }}
+                </div>
+              </div>
+            </div>
+            <div class="zs-z"></div>
+          </div>
+          <el-button
+            type="primary"
+            size="small"
+            style="margin-top: 10px"
+            @click="downloadContentAsImage()"
+            >下载电子证书</el-button
+          >
         </div>
       </div>
     </el-dialog>
@@ -207,6 +238,7 @@ import {
   dsbrecordsInfo,
   issue,
 } from "@/api/volunteer/gxhzs/hdzsff/index.js";
+import html2canvas from "html2canvas";
 export default {
   data() {
     return {
@@ -244,6 +276,23 @@ export default {
     });
   },
   methods: {
+    /**下载电子证书 */
+    downloadContentAsImage() {
+      const content = this.$refs.zs; // 获取目标<div>的DOM节点
+      // 创建一个Canvas元素，并设置宽高等于目标<div>的尺寸
+      const canvas = document.createElement("canvas");
+      canvas.width = content.offsetWidth;
+      canvas.height = content.offsetHeight;
+      const context = canvas.getContext("2d");
+      // 使用Canvas绘制目标<div>中的内容
+      html2canvas(content).then((canvas) => {
+        // 将Canvas转换为DataURL
+        const dataURL = canvas.toDataURL("image/png");
+        // 使用FileSaver.js保存DataURL为图片文件
+        saveAs(dataURL, "download.png");
+      });
+    },
+
     /**搜索 */
     handleSearch(keyWord) {
       this.queryParams = {

src/views/volunteer/gxhzs/mygxhzs/index.vue

@@ -101,7 +101,38 @@
             <img src="@/assets/images/huodong.png" alt="" />
             <span>电子证书</span>
           </div>
-          <div class="info"></div>
+          <div class="info zs-box" ref="zs">
+            <div class="top-text">
+              <span>{{ form.userName }}</span> 先生/女士：
+              <p>
+                您在苏州工业园区累计志愿服务0小时，感谢您的无私奉献，特发此证，以兹鼓励。
+              </p>
+            </div>
+            <div class="bottom-text">
+              <div class="lable-value">
+                <div class="lable">签发单位：</div>
+                <div class="value">苏州工业园区宣传和统战部</div>
+              </div>
+              <div class="lable-value">
+                <div class="lable"></div>
+                <div class="value">苏州工业园区新时代文明实践中心</div>
+              </div>
+              <div class="lable-value">
+                <div class="lable"></div>
+                <div class="value">
+                  {{ $moment().format("YYYY年MM月DD日") }}
+                </div>
+              </div>
+            </div>
+            <div class="zs-z"></div>
+          </div>
+          <el-button
+            type="primary"
+            size="small"
+            style="margin-top: 10px"
+            @click="downloadContentAsImage()"
+            >下载电子证书</el-button
+          >
         </div>
       </div>
     </el-dialog>
@@ -109,6 +140,7 @@
 </template>
 
 <script>
+import html2canvas from "html2canvas";
 import {
   dsbrecordsList,
   dsbrecordsInfo,
@@ -151,6 +183,23 @@ export default {
     });
   },
   methods: {
+    /**下载电子证书 */
+    downloadContentAsImage() {
+      const content = this.$refs.zs; // 获取目标<div>的DOM节点
+      // 创建一个Canvas元素，并设置宽高等于目标<div>的尺寸
+      const canvas = document.createElement("canvas");
+      canvas.width = content.offsetWidth;
+      canvas.height = content.offsetHeight;
+      const context = canvas.getContext("2d");
+      // 使用Canvas绘制目标<div>中的内容
+      html2canvas(content).then((canvas) => {
+        // 将Canvas转换为DataURL
+        const dataURL = canvas.toDataURL("image/png");
+        // 使用FileSaver.js保存DataURL为图片文件
+        saveAs(dataURL, "download.png");
+      });
+    },
+
     isLastRow(index) {
       const rowCount = Math.ceil(this.certificatesList.length / 5);
       const row = Math.floor(index / 5);