update:增加保存到相册功能

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>