网络下载修复

package.json

@@ -46,6 +46,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/views/netEwm/net/index.vue

@@ -104,7 +104,7 @@
             type="text"
             icon="el-icon-download"
             @click="handleCode(scope.row)"
-            >生成二维码</el-button
+            >下载二维码</el-button
           >
           <el-button
             size="mini"
@@ -156,10 +156,14 @@
     <el-dialog
       title="WI-FI码"
       :visible.sync="wifiopen"
-      width="400px"
+      width="420px"
       append-to-body
     >
-      <img :src="imgs" alt="" class="codeImg" />
+      <div ref="downloadElement" style="padding: 20px 10px">
+        <img :src="code.imgs" alt="" class="codeImg" />
+        <div class="netName">WI-FI名称：{{ code.netName }}</div>
+      </div>
+
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="handleUpload()">下载图片</el-button>
       </div>
@@ -171,11 +175,16 @@
 import { listNet, getNet, delNet, addNet, updateNet } from "@/api/netEwm/net";
 import { mapGetters } from "vuex";
 import { getCode } from "@/api/login.js";
+import html2canvas from "html2canvas";
 export default {
   name: "Net",
   data() {
     return {
       wifiopen: false,
+      code: {
+        imgs: "",
+        netName: "",
+      },
       imgs: null,
       // 遮罩层
       loading: true,
@@ -217,26 +226,29 @@ export default {
   },
   methods: {
     handleUpload() {
-      // 创建一个虚拟的链接（a标签）
+      const downloadElement = this.$refs.downloadElement;
-      const link = document.createElement("a");
+      // 使用html2canvas将元素转换为Canvas
-      // 设置链接的href属性为图片的URL
+      html2canvas(downloadElement).then((canvas) => {
-      link.href = this.imgs;
+        // 获取Canvas的Base64编码
-      // 设置下载的文件名（你可以根据需要更改）
+        const base64Image = canvas.toDataURL("image/png");
-      link.download = "downloaded_image.jpg";
+
-      // 将链接追加到文档中
+        // 创建一个虚拟的下载链接
-      document.body.appendChild(link);
+        const downloadLink = document.createElement("a");
-      // 模拟点击链接来触发下载
+        downloadLink.href = base64Image;
-      link.click();
+        downloadLink.download = "downloaded_image.png";
-      // 删除链接，以防止影响页面
+
-      document.body.removeChild(link);
+        // 模拟点击下载链接
+        downloadLink.click();
+      });
     },
     handleCode(row) {
       let data = {
         path: "pages/index/index",
-        shanghuId: row.shanghuId,
+        shanghuId: row.id,
       };
       getCode(data).then((res) => {
-        this.imgs = "data:image/png;base64," + res.data;
+        this.code.imgs = "data:image/png;base64," + res.data;
+        this.code.netName = row.netName;
         this.wifiopen = true;
       });
     },
@@ -304,6 +316,10 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
+      if (!this.shanghuId) {
+        this.$modal.msgError("您不是商户！");
+        return;
+      }
       this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
@@ -355,4 +371,10 @@ export default {
   width: 100%;
   height: 350px;
 }
+.netName {
+  margin-top: 6px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+}
 </style>