html2pdf: How To Hide
From PDF?

Question

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

@CodyG. Of course, I clearly mentioned it. I WANT TO DOWNLOAD `
` as a PDF. — Partab Saifuddin Zakir, Nov 28 '18 at 18:40
@LucasOliveira I am generation PDF with HELLO WORLD written in it. but i don't know how to download PDF with `
` — Partab Saifuddin Zakir, Nov 28 '18 at 18:41
@CodyG. Did this, getting nothing no error, no response, nothing.... — Partab Saifuddin Zakir, Nov 28 '18 at 20:22
Did this: `var ele = document.getElementById('mydiv')` now getting this error: `Cannot read property '1' of undefined` — Partab Saifuddin Zakir, Nov 28 '18 at 21:48

Lucas Reis · Accepted Answer · 2018-11-29T13:15:48.220

12

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:

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

<div id="content">
  Test
</div>

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>

edited Nov 29 '18 at 13:15

answered Nov 28 '18 at 20:00

Lucas Reis

441
2
9

1

@LucaOliveira i can download PDF, but there is a footer which i want to hide in PDF how can i do that ? – Partab Saifuddin Zakir Nov 29 '18 at 00:27
@SaifZakir Edited the answer try that! – Lucas Reis Nov 29 '18 at 13:16
1

@LucasReis thank you!! was looking for this all over! – Manas Nov 27 '19 at 04:04
1

@LucasReis Thanks! I imagined it would be simple but couldn't find this anywhere. – Artorias2718 May 10 '21 at 05:24

score 1 · Answer 2 · 2018-11-28T19:26:57.843

1

You need to add an id to your div as follows :

  <div id="toprint" class="invoice" >
    ....

and in the method get the content of that div :

   let pdfName = 'test'; 
   var doc = new jsPDF();
   let content=document.getElementById("toprint").outerHTML
    doc.text(content, 10, 10);
    doc.save(pdfName + '.pdf');

or by using the default printing functionality in browser:

createPDF() {
  let content = document.getElementById("toprint").outerHTML;
  /******************** */
  let yourDOCTYPE = "<!DOCTYPE html...";
  let printPreview = window.open("", "print_preview");
  let printDocument = printPreview.document;
  printDocument.open();
  let head =
    "<head>" +
    "<title>" +
    this.title +
    "</title>" +
    +
    "</head>";

  printDocument.write(
    yourDOCTYPE +
    "<html>" +
    head +
    "<body>"
    content +
    "</body>" +
    "</html>"
  );
  printPreview.print();
  printPreview.close();
}

edited Nov 28 '18 at 19:26

answered Nov 28 '18 at 19:00

Now I'm getting this in my downloaded PDF: `

lightgray;">
Generate PDF
`
– Partab Saifuddin Zakir Nov 28 '18 at 19:06
1

in your case i think you should use built-in print functionnatity in browser – Nov 28 '18 at 19:14
Like print Invoice and download PDF from there ? – Partab Saifuddin Zakir Nov 28 '18 at 19:17
Getting error on `content`: `312 | head + 313 | "" > 314| content + | ^ 315 | "" + 316 | " – Partab Saifuddin Zakir Nov 28 '18 at 19:43

Cody Ｇ · Answer 3 · 2018-11-29T13:17:15.263

Edit: When I initially answered this question, OP wanted to use jsPDF.

See How to properly use jsPDF library

For vue you'll probably want to generate some sort of unique id for each component element so that way you don't grab the first element every time.

var pdf = new jsPDF('p', 'pt', 'letter');
var ele = document.getElementsByClassName("invoice")[0];
// var ele = document.getElementById("mydiv");
var margins = {
  top: 80,
  bottom: 60,
  left: 40,
  width: 522
};
var cb = function (dispose) {
  pdf.save('Test.pdf');
}
var opt =  { 'width': margins.width };
pdf.fromHTML(ele,margins.left, margins.top, opt, cb, margins)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script>
<div id="mydiv" class="invoice"><b> Test </b></div>

Getting this error, When i hit download button. `Cannot read property '0' of null` — Partab Saifuddin Zakir, Nov 28 '18 at 20:12

score 0 · Answer 4 · answered Aug 28 '19 at 11:07

var element = document.getElementById('target-div');
            var opt = {
                margin:0,
                filename: 'myfile.pdf',
                image: {type: 'jpeg',quality: 0.98},
                html2canvas: {scale: 2},
                jsPDF: {
                    unit: 'mm',
                    orientation: 'portrait'
                }
            };

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

html2pdf: How To Hide From PDF?

4 Answers4

html2pdf: How To Hide
From PDF?