CODEWITHSUNDEEP
javascripthtmlvue.jsjspdf
Partab Saifuddin Zakir
Partab Saifuddin Zakir

Reputation: 381

html2pdf: How To Hide <div> From PDF?

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

Upvotes: 1

Views: 11317

Answers (4)

Shuvro Akash
Shuvro Akash

Reputation: 567

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

Upvotes: -1

Cody Geisler
Cody Geisler

Reputation: 8617

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>

Upvotes: 0

Lucas Reis
Lucas Reis

Reputation: 471

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>

Upvotes: 15

user10425167
user10425167

Reputation:

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

Upvotes: 1

Related Questions