'How to use html2canvas with Vue JS?

The first obstacle that I faced is that there is no shorthand for document.getElementByIdin Vue so I implemented a function like this one. The second obstacle I'm facing is that IMHO the html2canvas docs are very limited when dealing with situations whee you don't have a <!DOCTYPE html> and a <body>.

Here's the summary of the markup in my .vuefile:

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

and this is how I'm trying to implement the capture function:

//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")
  });
},

Solution 1:^[1]

I figured it out, I had 2 mistakes:

First of all I had id='capture' instead of ref="capture"

Second, this line vc.document.body.appendChild(canvas), needs to be changed to document.body.appendChild(canvas)

This is the final code for a function that downloads such canvas as an image:

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")
  });
},

Solution 2:^[2]

For future readers. Try this 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>

Solution 3:^[3]

https://www.npmjs.com/package/vue-html2canvas
  
  <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'
          };
          (async () => {
              this.output = await this.$html2canvas(el, options);
          })()
        }
      }
    }
    </script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Esteban Vargas
Solution 2	CENT1PEDE
Solution 3	Avanish Tiwari

'How to use html2canvas with Vue JS?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]