html2canvas jspdf render vue component

Question

I'm trying to render vue component's template to canvas and then add it to html but all I have is blank image. Is it even possible?

I tried to render document.body as image and it was just perfect (without using component, directly from parent). Then I tried to set this.$refs.content as element to capture and even got the right output from console.log, but I got only white empty space picture. Now I decided to wrap this logic inside a component. The desired div to be captured is at the bottom of the page and you need to scroll a lot to get to it. Maybe there's the problem? Any suggestions is highly appreciated.

Here's components template:

<template>
  <div>
    <button @click="download" class="btn">PDF Download</button>
    <div class="A4" ref="content">
      <div class="col s12">
        <h5 style="text-align: center">
          <strong>Load Confirmation & Rate Agreement</strong>
        </h5>
      </div>
      <div class="col s12">
        <div class="col s2">
          <img style="width: 110px" :src="logo" alt="logo" />
        </div>
        <div class="col s4">
          <h6>
            <strong>{{ companyName.toUpperCase() }}</strong>
          </h6>
          <p style="margin-top: 0px;">We make it move!</p>
        </div>
      </div>
    </div>
  </div>
</template>

here's component's script section:

<script>
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

export default {
  data: () => ({
    logo: '',
    companyName: ''
  }),
  methods: {
    download() {
      let self = this;
      console.log(self);
      return new Promise((resolve, reject) => {
        let windowHeight = self.$refs.content.offsetHeight;
        let windowWidth = self.$refs.content.offsetWidth;
        let pdfName = 'results';
        var doc = new jsPDF('p', 'mm', 'a4');
        var canvasElement = document.createElement('canvas');
        canvasElement.width = windowWidth;
        canvasElement.height = windowHeight;
        html2canvas(self.$refs.content, {
          canvas: canvasElement,
          width: windowWidth,
          height: windowHeight
        })
          .then(function(canvas) {
            let ratio = canvas.width / canvas.height;
            let PDFwidth = doc.internal.pageSize.getWidth();
            let PDFheight = PDFwidth / ratio;
            const img = canvas.toDataURL('image/jpeg', 1);
            doc.addImage(img, 'JPEG', 0, 0, PDFwidth, PDFheight);
            doc.save('sample.pdf');
            resolve();
          })
          .catch(err => {
            reject(err);
          });
      });
    }
  },
  async mounted() {
    this.logo = (await this.$store.dispatch('fetchLogo')).logo;
    this.companyName = await this.$store.dispatch('fetchCompanyName');
  }
};
</script>

and style:

<style scoped>
.A4 {
  border: 1px solid black;
  background-color: lightgoldenrodyellow;
  height: 297mm;
  width: 210mm;
  padding: 5mm;
}
</style>

Madcap · Accepted Answer · 2019-11-30 01:33:48Z

0

I installed vue-html2canvas instead. Got correct canvas without any additional options:

let el = this.$refs.print.$el;
this.output = (await html2canvas(el)).toDataURL();

$el is necessarily when calling ref which is vue-component

answered Nov 30, 2019 at 1:33

Madcap

1173 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

html2canvas jspdf render vue component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related