保存

package.json

@@ -31,6 +31,7 @@
     "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.2.3",
+    "html2canvas": "^1.3.2",
     "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {

src/views/sales/codePoster.vue

@@ -2,13 +2,13 @@
   <div class="er-poster">
     <Card>
       <div class="er-url">
-        <div class="img-side">
+        <div class="img-side" id="erId">
           <img :src="'data:image/jpg;base64,' + comData.qrLink" alt="">
         </div>
         <div class="r-cont">
           <p>超级订阅产品链接</p>
           <div class="copy-ipt">
-            <input id="txts"v-model="copyIpt" readonly>
+            <input id="txts" v-model="copyIpt" readonly>
             <Button slot="append" @click="copy">复制</Button>
           </div>
           <Button @click="codeDown">下载二维码</Button>
@@ -64,12 +64,13 @@
               </div>
             </div>
             <div class="r-bg">
-              <div class="bg-img" :style="{backgroundImage:'url(' + urls + ')'}">
+              <div class="bg-img" id="posterId" :style="{backgroundImage:'url(' + urls + ')'}">
                 <div class="img-code">
                   <img :src="'data:image/jpg;base64,' + comData.posterQrLink" alt="">
+                  <p>长按识别二维码</p>
                 </div>
               </div>
-              <Button>保存并下载二维码海报</Button>
+              <Button @click="savePoster('posterId', '二维码海报', 2)">保存并下载二维码海报</Button>
             </div>
           </div>
         </TabPane>
@@ -79,7 +80,7 @@
     <Modal title="下载二维码" v-model="erShow" class-name="er-modal" :footer-hide="true" :mask-closable="false">
       <Table border :columns="columns1" :data="logoSize">
         <template slot-scope="row" slot="action">
-            <Button type="text" icon="ios-cloud-download-outline" @click="downed(row)"></Button>
+            <Button type="text" icon="ios-cloud-download-outline" @click="downed('erId', row)"></Button>
         </template>
       </Table>
     </Modal>
@@ -87,16 +88,17 @@
 </template>
 
 <script>
+import html2canvas from 'html2canvas'
 export default {
   data() {
     return {
       copyIpt: '',
       urls: '',
       logoSize: [
-        {id: '1', size: '150*150', scene: '常规尺寸'},
-        {id: '2', size: '256*256', scene: '适合插入文档使用'},
-        {id: '3', size: '512*512', scene: '适合插入PPT使用'},
-        {id: '4', size: '1024*1024', scene: '适合印刷出版物使用'}
+        {id: '1', size: '150*150', scene: '常规尺寸', scale: 1},
+        {id: '2', size: '256*256', scene: '适合插入文档使用', scale: 1.7},
+        {id: '3', size: '512*512', scene: '适合插入PPT使用', scale: 3},
+        {id: '4', size: '1024*1024', scene: '适合印刷出版物使用', scale: 6}
       ],
       lDis: false,
       rDis: false,
@@ -211,8 +213,47 @@ export default {
     codeDown() {
       this.erShow = true
     },
-    downed(row) {
-      location.href = ''
+    //图片格式转换方法
+    dataURLToBlob(dataurl) {
+      let arr = dataurl.split(',')
+      let mime = arr[0].match(/:(.*?);/)[1]
+      let bstr = atob(arr[1])
+      let n = bstr.length
+      let u8arr = new Uint8Array(n)
+      while (n--) {
+          u8arr[n] = bstr.charCodeAt(n)
+      }
+      return new Blob([u8arr], { type: mime })
+    },
+    html2(idName, imgText, size) {
+      let _this = this
+      let a = document.createElement('a')
+      let Id = document.querySelector("#" + idName)
+      html2canvas(Id, {
+        useCORS: true,
+        scale: size
+      }).then(canvas => {
+        let dom = document.body.appendChild(canvas)
+        dom.style.display = 'none'
+        a.style.display = 'none'
+        document.body.removeChild(dom)
+        let blob = _this.dataURLToBlob(dom.toDataURL('image/png'))
+        a.setAttribute('href', URL.createObjectURL(blob))
+        //保存图片操作(设置保存的图片信息)
+        a.setAttribute('download', imgText + '.png')
+        document.body.appendChild(a)
+        a.click()
+        URL.revokeObjectURL(blob)
+        document.body.removeChild(a)
+      })
+    },
+    downed(idName, row) {
+      console.log(row.row.size+row.row.scene)
+      const imgText = row.row.size + row.row.scene
+      this.html2(idName, imgText, row.row.scale)
+    },
+    savePoster(idName, imgText, size) {
+      this.html2(idName, imgText, size)
     }
   },
 }
@@ -229,11 +270,11 @@ export default {
     display: flex;
     flex-direction: inherit;
     .img-side {
-      width: 162px;
-      height: 162px;
+      width: 150px;
+      height: 150px;
       border: 1px solid #eee;
       img {
-        width: 160px;
+        width: 148px;
       }
     }
     .r-cont {
@@ -344,8 +385,8 @@ export default {
     margin-left: 5%;
     .bg-img {
       position: relative;
-      width: 100%;
-      height: 460px;
+      width: 375px;
+      height: 625px;
       background-repeat: no-repeat;
       background-size: contain;
       .img-code {
@@ -355,10 +396,13 @@ export default {
         position: absolute;
         left: 50%;
         bottom: 50px;
-        margin-left: -40px;
+        margin-left: -50px;
         img {
           width: 100px;
         }
+        p {
+          color: #fff;
+        }
       }
     }
     .ivu-btn {