html2pdf: How To Hide From PDF?

Total
0
Shares

I’m using html2pdf

I can Generate PDF of my Invoice, but i don’t want a <div class="div-dont-want-to-display"> to display on my PDF, how can i do that ?

My Vue.js Component:

    <template>
      <div class="invoice p-3 mb-3" id="mydiv">

      <div class="div-dont-want-to-display">

      <!-- AND MANY MORE DIV'S -->

      <!--BUTTON TO DOWNLOAD PDF-->
        <a href @click.prevent="createPDF"class="btn btn-primary float-right">
          <i class="fa fa-download"></i> Generate PDF </a>
      </div>
    </template>

Method for createPDF():

import html2pdf from 'html2pdf.js'

export default {

  methods: {
    createPDF() {
      var element = document.getElementById('mydiv');

      var opt = {
        margin: 0,
        filename: 'myfile.pdf',
        image: {type: 'jpeg',quality: 0.98},
        html2canvas: {scale: 2},
        jsPDF: {
          unit: 'mm',
          format: [280, 350],
          orientation: 'portrait'
        }
      };

      html2pdf().set(opt).from(element).save();
    },
  }
}

Solution

You can use the library html2pdf that uses jsPDF and html2canvas.

The lib creates an PDF from a image of the div that you pass as an argument.

The code to call the lib after importing is as follows:

_x000D_

_x000D_

var element = document.getElementById('content');_x000D_
html2pdf(element);

_x000D_

<div id="content">_x000D_
  Test_x000D_
</div>

_x000D_

_x000D_

_x000D_

You can pass some options too, more details on the github of the lib.

You can hide some elements using the following tag:

<div id="element-to-hide" data-html2canvas-ignore="true"></div>
Leave a Reply

Your email address will not be published. Required fields are marked *