Search code examples
jspdfhtml2canvashtml2pdf

how can I control the font-size in html2canvas


I'm using html2pdf that creates pdf from html code. It uses html2canvas and jsPDF. The result is very good but slightly different from the original: the font-size and line-height are a little bit different so that the end of the page is not correct. I really need a copy if the div (that has fixed aspect to be correctly rendered on A4 pages).

Is there a way to influence the fonts in the final rendering? The way I produce pdf now is:

   savePdf () {
      this.pdfDialog = true
      let opt = {
        // if set firefox will not be able to print as pdf!...
        // margin: 0,
        filename: 'cv.pdf',
        enableLinks: true,
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: {
          scale: 8,
          useCORS: true,
          width: 310,
          letterRendering: true,
        },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
      }
      html2pdf().set(opt).from(document.getElementById('printable-cv')).save()]
},

Solution

  • The solution is to add inline styles to the elements. In my case, working in vuejs I ended up with this code:

    <div class="presentazione" v-html="presentation" :style="presentationFont"></div>