update:增加保存到相册功能

FrontCode2/sunshine_levy/package.json

@@ -13,6 +13,8 @@
     "@aligov/jssdk-mgop": "^3.0.0",
     "axios": "^0.21.4",
     "element-ui": "^2.15.6",
+    "html2canvas": "^1.3.2",
+    "jquery": "^3.6.0",
     "js-md5": "^0.7.3",
     "less": "^4.1.1",
     "less-loader": "^4.1.0",

FrontCode2/sunshine_levy/src/views/pdf/evaluteResult.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="pdf">
+    <div class="pdf" ref="image">
       <div id="printdiv">
         <!-- 表格1 -->
         <table
@@ -461,14 +461,35 @@
         </p>
       </div>
     </div>
-    <div class="button">
+    <!-- 底部按钮 -->
-      <el-button type="primary">保存到相册</el-button>
+    <div class="bottom">
+      <a href="#" download="">
+        <el-button type="primary">保存到相册</el-button>
+      </a>
     </div>
   </div>
 </template>
+<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
 <script>
-import "./evaluateResult.js";
+import jquery from "jquery";
-export default {};
+import html2canvas from "html2canvas";
+// import "./evaluateResult.js";
+export default {
+  data() {
+    return {};
+  },
+  methods: {},
+  mounted() {
+    html2canvas(this.$refs.image).then(canvas => {
+      canvas.id = "mycanvas";
+      var base64 = canvas.toDataURL("image/png");
+      jquery("a").prop("href", base64);
+      // var newImg = document.createElement("img");
+      // newImg.src = dataUrl;
+      // document.body.appendChild(newImg);
+    });
+  }
+};
 </script>
 
 <style lang="less" scoped>
@@ -568,7 +589,7 @@ export default {};
       }
     }
   }
-  .button {
+  .bottom {
     text-align: center;
     margin-bottom: 20px;
   }

FrontCode2/sunshine_levy/src/views/pdf/pdf.vue

@@ -1,23 +1,40 @@
 <template>
   <div>
     <pdf :src="url"></pdf>
+    <div ref="content" class="content">被保存的内容</div>
+    <div class="bottom">
+      <a href="" download="">
+        <el-button type="primary">保存到相册</el-button>
+      </a>
+    </div>
   </div>
 </template>
 
+<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
 <script>
-import pdf from 'vue-pdf';
+import pdf from "vue-pdf";
+import jquery from "jquery";
+import html2canvas from "html2canvas";
 export default {
   components: {
-    pdf,
+    pdf
   },
   data() {
     return {
-      url: '',
+      url: ""
     };
   },
   created() {
     this.onInit();
-    console.log('pdf');
+    console.log("pdf");
+  },
+  mounted() {
+    // 截图
+    html2canvas(this.$refs.content).then(canvas => {
+      canvas.id = "mycanvas";
+      const base64 = canvas.toDataURL("image/png");
+      jquery("a").prop("href", base64);
+    });
   },
   methods: {
     onInit() {
@@ -26,7 +43,18 @@ export default {
     onLoadData() {
       console.log(this.$route.params);
       this.url = this.$route.params.url;
-    },
+    }
-  },
+  }
 };
-</script>
+</script>
+<style lang="less" scoped>
+.content {
+  text-align: center;
+  height: 200px;
+  line-height: 200px;
+}
+.bottom {
+  text-align: center;
+  margin-bottom: 20px;
+}
+</style>