partabsaifzakir's avatar

html2pdf: How To Hide div From PDF?

================================================QUESTION UPDATED================================================

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();
        },
      }
    }
0 likes
2 replies
tpane24's avatar

in your Vue.js component, you need to hide the . You can do this by:

var app = new Vue({
        el: '#app',
        data: {
            show: false
        }
    })
<div v-if="show" class="div-dont-want-to-display">
1 like
partabsaifzakir's avatar
Level 1

@TPANE24 - I did this:

<div id="element-to-hide" data-html2canvas-ignore="true"></div>
1 like

Please or to participate in this conversation.