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();
},
}
}
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();
},
}
}
- You want to generate the PDF from what? – Lucas Reis Commented Nov 28, 2018 at 18:35
-
@CodyG. Of course, I clearly mentioned it. I WANT TO DOWNLOAD
<div class="invoice">as a PDF. – Partab Saifuddin Zakir Commented Nov 28, 2018 at 18:40 -
@LucasOliveira I am generation PDF with HELLO WORLD written in it. but i don't know how to download PDF with
<div class="invoice">– Partab Saifuddin Zakir Commented Nov 28, 2018 at 18:41 - @CodyG. Did this, getting nothing no error, no response, nothing.... – Partab Saifuddin Zakir Commented Nov 28, 2018 at 20:22
- 1 i think i should go with html2pdf .... – Partab Saifuddin Zakir Commented Nov 28, 2018 at 20:24
4 Answers
Reset to default 15You 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>
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();
}
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 ponent 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./ajax/libs/jspdf/1.4.1/jspdf.min.js"></script>
<div id="mydiv" class="invoice"><b> Test </b></div>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();