Question

我遇到的第一个障碍是Vue中没有document.getElementById的简写，所以我实现了function like this one。我面临的第二个障碍是，在处理没有<!DOCTYPE html>和<body>的情况时，恕我直言html2canvas docs非常有限。

以下是我的.vue文件中的标记摘要：

<template>
   <div>
      <md-layout>
         <div id="capture" class='m1 '>
            // more markup...
         </div>
      </md-layout>
   </div>
</template>

这就是我试图实现捕获功能的方法：

//Vue equivalent for document.getElementById
showCaptureRef() {
   console.log(this.$refs.capture);
},
// Screen capture function
downloadVisualReport () {
  let vc = this
  alert("Descargando reporte visual")
  html2canvas(vc.showCaptureRef).then(canvas => {
      vc.document.body.appendChild(canvas)
  }).catch((error) => {
    console.log("Erorr descargando reporte visual")
    alert("Error descargando el reporte visual")
  });
},

Answer 1

我明白了，我有两个错误：

首先，我有id='capture'而不是ref="capture"

其次，此行vc.document.body.appendChild(canvas)需要更改为document.body.appendChild(canvas)

这是将此类画布下载为图像的函数的最终代码：

downloadVisualReport () {
  let vc = this
  let filename = 'Reporte de ' + vc.campaign.name + '.png'; 
  html2canvas(vc.showCaptureRef()).then(canvas => {  
      vc.saveAs(canvas.toDataURL(), filename);      
  }).catch((error) => {
    alert("Error descargando el reporte visual")
  });
},

Answer 2

对于未来的读者。试试这个vue-html2canvas mixin。

<template>
  <div>
    <!-- SOURCE -->
    <div ref="printMe">
      <h1>Print me!</h1>
    </div>
    <!-- OUTPUT -->
    <img :src="output">
  </div>
<teplate>

<script>
export default {
  data() {
    return {
      output: null
    }
  },
  methods: {
    print() {
      const el = this.$refs.printMe;
      // add option type to get the image version
      // if not provided the promise will return 
      // the canvas.
      const options = {
        type: 'dataURL'
      }
      this.output = await this.$html2canvas(el, options);
    }
  }
}
</script>

Answer 3

const [groupZero, groupOne, groupTwo, groupThree, groupFour] = groupData;

如何在Vue JS中使用html2canvas？

3 个答案: