title: How to use html2canvas with Vue JS?
body: <p>The first obstacle that I faced is that there is no shorthand for <code>document.getElementById</code>in Vue so I implemented a <a href="https://stackoverflow.com/questions/36970062/vue-js-document-getelementbyid-shorthand">function like this one</a>. The second obstacle I'm facing is that IMHO the <a href="https://html2canvas.hertzen.com/documentation" rel="nofollow noreferrer">html2canvas docs</a> are very limited when dealing with situations whee you don't have a <code>&lt;!DOCTYPE html&gt;</code> and a <code>&lt;body&gt;</code>.</p>
  
  <p>Here's the summary of the markup in my <code>.vue</code>file:</p>
  
  <pre><code>&lt;template&gt;
     &lt;div&gt;
        &lt;md-layout&gt;
           &lt;div id="capture" class='m1 '&gt;
              // more markup...
           &lt;/div&gt;
        &lt;/md-layout&gt;
     &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>and this is how I'm trying to implement the capture function:</p>
  
  <pre><code>//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 =&gt; {
        vc.document.body.appendChild(canvas)
    }).catch((error) =&gt; {
      console.log("Erorr descargando reporte visual")
      alert("Error descargando el reporte visual")
    });
  },
  </code></pre>