添加下载打印

src/App.vue

@@ -14,6 +14,11 @@ export default {
     script.src = 'https://res.wx.qq.com/open/js/jweixin-1.4.0.js'
     script.language = 'JavaScript'
     document.body.appendChild(script)
+
+    const script2 = document.createElement('script')
+    script2.src = 'https://html2canvas.hertzen.com/dist/html2canvas.min.js'
+    script2.language = 'JavaScript'
+    document.body.appendChild(script2)
   },
 }
 </script>

src/views/trade/components/popup/IndexRecord.vue

@@ -10,42 +10,44 @@
       custom-class="xl-dialog"
       center
     >
-      <div class="scoped-info">
-        <div class="si-row">
-          <div class="si-col">成交楼盘：{{dtlObj.deal_item}}({{dtlObj.house_no}})</div>
-          <div class="si-col">房屋类型：{{houseTypeObj[dtlObj.house_type]}}</div>
-          <div class="si-col">成交店员：{{dtlObj.deal_clerk}}</div>
+      <div class="scoped-box"  ref="cutScreen">
+        <div class="scoped-info">
+          <div class="si-row">
+            <div class="si-col">成交楼盘：{{dtlObj.deal_item}}({{dtlObj.house_no}})</div>
+            <div class="si-col">房屋类型：{{houseTypeObj[dtlObj.house_type]}}</div>
+            <div class="si-col">成交店员：{{dtlObj.deal_clerk}}</div>
+          </div>
+          <div class="si-row">
+            <div class="si-col">成交类型：{{dealTypeObj[dtlObj.deal_type]}}</div>
+            <div class="si-col">成交日期：{{dtlObj.deal_at}}</div>
+            <div class="si-col">折扣体系：{{dtlObj.discount}}</div>
+          </div>
+          <div class="si-row">
+            <div class="si-col">客户姓名：{{dtlObj.customer_name}}</div>
+            <div class="si-col">客户电话：{{dtlObj.customer_phone}}</div>
+            <div class="si-col">成交备注：{{dtlObj.remark || '无'}}</div>
+          </div>
+          <div class="si-row">
+            <div class="si-col">成交面积：{{dtlObj.area}}㎡</div>
+            <div class="si-col">成交总价：{{dtlObj.price}}万元</div>
+            <div class="si-col">成交单价：{{(Number(dtlObj.price * 10000)/dtlObj.area).toFixed(2)}}元</div>
+          </div>
+          <div class="si-row">
+            <div class="si-col">报备渠道：{{dtlObj.report_dept}}</div>
+            <div class="si-col" @click="openBrokerageImgPopup">成交佣金：{{dtlObj.brokerage || '-'}}元 <span class="img">[图片凭证]</span></div>
+            <div class="si-col">成交返佣：{{dtlObj.rebate || '-'}}元</div>
+          </div>
         </div>
-        <div class="si-row">
-          <div class="si-col">成交类型：{{dealTypeObj[dtlObj.deal_type]}}</div>
-          <div class="si-col">成交日期：{{dtlObj.deal_at}}</div>
-          <div class="si-col">折扣体系：{{dtlObj.discount}}</div>
+        <div class="scoped-table">
+          <table-list
+            :list-loading="listLoading"
+            :data="reportFlow"
+            :columns="listConfig"
+            :current-page="currentPage"
+            :page-size="-1"
+            >
+          </table-list>
         </div>
-        <div class="si-row">
-          <div class="si-col">客户姓名：{{dtlObj.customer_name}}</div>
-          <div class="si-col">客户电话：{{dtlObj.customer_phone}}</div>
-          <div class="si-col">成交备注：{{dtlObj.remark || '无'}}</div>
-        </div>
-        <div class="si-row">
-          <div class="si-col">成交面积：{{dtlObj.area}}㎡</div>
-          <div class="si-col">成交总价：{{dtlObj.price}}万元</div>
-          <div class="si-col">成交单价：{{(Number(dtlObj.price * 10000)/dtlObj.area).toFixed(2)}}元</div>
-        </div>
-        <div class="si-row">
-          <div class="si-col">报备渠道：{{dtlObj.report_dept}}</div>
-          <div class="si-col" @click="openBrokerageImgPopup">成交佣金：{{dtlObj.brokerage || '-'}}元 <span class="img">[图片凭证]</span></div>
-          <div class="si-col">成交返佣：{{dtlObj.rebate || '-'}}元</div>
-        </div>
-      </div>
-      <div class="scoped-table">
-        <table-list
-          :list-loading="listLoading"
-          :data="reportFlow"
-          :columns="listConfig"
-          :current-page="currentPage"
-          :page-size="-1"
-          >
-        </table-list>
       </div>
       <div class="xl-form" style="padding-top: 20px;">
         <div class="xl-form-footer">
@@ -54,6 +56,7 @@
               <!-- <el-button type="small" icon="el-icon-warning" class="xl-form-btn bgc4" @click="openStatePopup">修改状态</el-button> -->
             </div>
           <el-button class="xl-form-btn t2" @click="close">关闭弹窗</el-button>
+          <el-button class="xl-form-btn t3" @click="getScrean">下载</el-button>
         </div>
       </div>
     </el-dialog>
@@ -95,7 +98,7 @@ export default {
       isStateShow: false,
       houseTypeObj: {},
       dealTypeObj: {},
-      bigImgShow: {},
+      bigImgShow: false,
       bigImgSrc: '',
     }
   },
@@ -140,6 +143,55 @@ export default {
     },
   },
   methods: {
+    getScrean () {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      setTimeout(() => {
+          // 创建一个新的canvas
+        const _canvas = this.$refs.cutScreen
+        // 此处用于解决截图不清晰问题，将生成的canvas放大，然后再填充到原有的容器中就会清晰
+        const width = _canvas.offsetWidth
+        const height = _canvas.offsetHeight
+        const canvas2 = document.createElement('canvas')
+        const scale = 2
+        canvas2.width = width * scale
+        canvas2.height = height * scale
+        const context1 = canvas2.getContext('2d')
+        if(context1) {
+          // context1.scale(scale, scale)
+          context1.scale(1, 1)
+        }
+        const opts = {
+          scale,
+          canvas: canvas2,
+          // logging: true, //日志开关，便于查看html2canvas的内部执行流程
+          width,
+          height,
+          // 【重要】开启跨域配置
+          useCORS: true 
+          }
+        html2canvas(_canvas,opts).then((canvas) => {
+          const context = canvas2.getContext('2d')
+          if(context) {
+            context.scale(2,2)
+            context.mozImageSmoothingEnabled = false
+            context.webkitImageSmoothingEnabled = false
+            context.imageSmoothingEnabled = false
+          }
+          this.screenUrl = canvas.toDataURL()
+          var a = document.createElement('a')
+          var event = new MouseEvent('click')
+          a.download = `${this.curObj.deal_item}(${this.dtlObj.house_no})的成交详情`
+          a.href = this.screenUrl
+          a.dispatchEvent(event)
+          loading.close()
+        })
+      },100)
+    },
     openBrokerageImgPopup () {
       this.bigImgShow = true
     },