日报

src/views/Platform/presentation/testPresenyL.vue

@@ -121,20 +121,55 @@ export default {
     },
 
     sendReport(e, ele) {
-      setTimeout(() => {
-        var that = this
-        that.btn = false
-        html2canvas(document.getElementById('resumeId'), { useCORS: true, width: 1800 }).then(function(canvas) {
-          var url = canvas.toDataURL('image/png', 1.0)
-          console.log(url)
-          url = url.toString().substring(url.indexOf(',') + 1)
-          var postData = { 'reportId': ele.id, 'imgStr': url, 'url': window.location.href, 'emailUser': e }
-          dailyReportSendmail(postData).then(res => {
-            res.code === 200 ? that.$message({ type: 'success', message: '发送测试报告成功' }) : that.$message({ type: 'error', message: '发送测试报告失败，请联系管理员！' })
-            that.btn = true
-          })
+      var width = document.getElementById('resumeId').offsetWidth
+      var height = document.getElementById('resumeId').offsetHeight
+      var scale = 2
+      var canvas = document.createElement('canvas')
+      // 获取元素相对于视窗的偏移量
+      var rect = document.getElementById('resumeId').getBoundingClientRect()
+      canvas.width = width * scale
+      canvas.height = height * scale
+      var context = canvas.getContext('2d')
+      context.scale(scale, scale)
+
+      // 设置context位置, 值为相对于视窗的偏移量的负值, 实现图片复位
+      context.translate(-rect.left, -rect.top)
+
+      var options = {
+        scale: scale,
+        canvas: canvas,
+        // logging: true,
+        width: width,
+        height: height,
+        taintTest: true, // 在渲染前测试图片
+        useCORS: true, // 貌似与跨域有关，但和allowTaint不能共存
+        dpi: window.devicePixelRatio, // window.devicePixelRatio是设备像素比
+        background: '#fff'
+      }
+
+      html2canvas(document.getElementById('resumeId'), options).then(function(canvas) {
+        var dataURL = canvas.toDataURL('image/jpeg', 1.0) // 将图片转为base64, 0-1 表示清晰度
+        var base64String = dataURL.toString().substring(dataURL.indexOf(',') + 1) // 截取base64以便上传
+        var postData = { 'reportId': ele.id, 'imgStr': base64String, 'url': window.location.href, 'emailUser': e }
+        dailyReportSendmail(postData).then(res => {
+          res.code === 200 ? this.$message({ type: 'success', message: '发送测试报告成功' }) : this.$message({ type: 'error', message: '发送测试报告失败，请联系管理员！' })
         })
-      }, 1000)
+      })
+
+      // setTimeout(() => {
+      //   var that = this
+      //   that.btn = false
+      //   html2canvas(document.getElementById('resumeId'), { useCORS: true, width: 1800 }).then(function(canvas) {
+      //     var url = canvas.toDataURL('image/png', 1.0)
+      //     console.log(url)
+      //     url = url.toString().substring(url.indexOf(',') + 1)
+      //     var postData = { 'reportId': ele.id, 'imgStr': url, 'url': window.location.href, 'emailUser': e }
+      //     dailyReportSendmail(postData).then(res => {
+      //       res.code === 200 ? that.$message({ type: 'success', message: '发送测试报告成功' }) : that.$message({ type: 'error', message: '发送测试报告失败，请联系管理员！' })
+      //       that.btn = true
+      //     })
+      //   })
+      // }, 1000)
     }
   }
 }