print hidden div of visibility:collapse to pdf - javascript

I am using jspdf to print html elements to pdf. If the div section is not hidden, the pdf prints to view the contents of the html elements. When the section of the html element is hidden or collapse, it prints a blank pdf document. Here is the snippets
function bookPDF() {
// Get the element.
var element = document.getElementById('bookPDF');
var opt = {
margin: 1,
filename: 'book.pdf',
image: { type: 'png', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf().set(opt).from(element).save();
}
here is the html elements shown
<a onclick="bookPDF()" class="ui button">
<i class="download icon"></i> Book</a>
<div id="bookPDF"
style="visibility:collapse max-width:60%; margin:0 auto; background: #fff;border-bottom: 1px solid #ffffff;"
class="table-wrapper ui basic segment">
<h1 class="ui dividing header center aligned">
Books collections
</h1>
......//more content but pdf prints does not print
</div
how do I get around this... printing the pdf even when hidden with css element

You can try and temporarily make it visible then hide it after the print as in:
function bookPDF() {
// Get the element.
var element = document.getElementById("bookPDF");
var opt = {
margin: 1,
filename: "book.pdf",
image: { type: "png", quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: "in", format: "letter", orientation: "portrait" }
};
element.style.visibility = "visible"; // <== here
html2pdf().set(opt).from(element).save();
element.style.visibility = "hidden"; // <== and here
}

Related

Chain Multiple Elements In HTML2PDF?

I have a page that looks like this: https://www.pdffiller.com/jsfiller-desk16/?isShareViaLink=1&requestHash=0b686d3412abda4ce3280790c21ed048547fe38efb37cfe5eedfc9ab11dc5674&lang=en&projectId=1109967956&loader=tips&MEDIUM_PDFJS=true#9d3d7d408e8045169526ca212483a79f
[Sorry for the long link]
Sadly, I cannot save the PDF so I am trying to print every page. Each page has a div element with a [data-page-id="0"] wjere id=0 is the page number, starting from 0.
I have a sample script here
async function testShot() {
var element = document.querySelector(`div[data-page-id="0"]`);
await html2pdf(element, {
margin: 0,
width: "1442px",
html2canvas: {
scale: 1,
height: element.offsetHeight,
width: element.offsetWidth,
},
height: "1866.12px",
filename: "test.pdf",
image: { type: "png", quality: 0.98 },
});
}
And it works but how can I chain this for multiple elements into 1 pdf?

html pages come scattered between pages when i print them with html2pdf library in javascript

html2pdf is printing a pdf but the write is choppy between pages how to solve?
this my code javascript if you need to html i can comment it,
any one have an idea ? please help me!
<script>
window.onload = function () {
document.getElementById("download")
.addEventListener("click", () => {
const invoice = this.document.getElementById("invoice");
console.log(invoice);
console.log(window);
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'png', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'pt', format: 'a4', orientation: 'landscape'}
// p\init : pt unit: 'in', format: 'letter', orientation: 'landscape'
};
html2pdf().from(invoice).set(opt).save();
})
}
</script>
that is screenshot from pdf for more clarification
https://i.stack.imgur.com/eSdId.png

How can i hide different divs, or element chidrens with html2pdf library?

i'm using just javascript in scout framework, to get pdf from dinamic html site, my index.js:
function buttonHtml2Pdf() {
button = '<input type= "button" value="Stampa html2Pdf" id="html2pdf" class="menu-item menu-button unfocusable menubar-item left-of-button";" />';
$(button).insertBefore($("div[data-classid='DettaglioArticoliButton_org.eclipse.scout.apps.crm.client.crm.ContoClienteForm_InnerFormField_org.eclipse.scout.apps.crm.client.crm.MainClienteForm']"));
$("#html2pdf").click("click", function() {
var $elementoDaConvertire = $("div[data-classid='DettaglioOrdineBox_org.eclipse.scout.apps.crm.client.crm.ContoClienteForm_InnerFormField_org.eclipse.scout.apps.crm.client.crm.MainClienteForm']").html();
var elemClass = $("div[data-classid='org.eclipse.scout.apps.crm.client.crm.ContoClienteForm$MainBox$DettaglioArticoliBox$DettArticoliField$Table_DettArticoliField_org.eclipse.scout.apps.crm.client.crm.ContoClienteForm_InnerFormField_org.eclipse.scout.apps.crm.client.crm.MainClienteForm']").html();
var opt = {
margin: 1,
filename: 'Dettaglio_Ordini.pdf',
image: {
type: 'jpeg',
quality: 0.98
},
html2canvas: {
scale: 2,
letterRendering: true,
imageTimeout: 0,
width: 850,
height: 1200,
scrollX: 0,
scrollY: 20
},
jsPDF: {
unit: 'in',
format: 'a4',
orientation: 'portrait',
putOnlyUsedFonts: true,
floatPrecision: 'smart'
}
};
var worker = html2pdf();
worker = html2pdf().set(opt).from($elementoDaConvertire).toContainer().then(() => {
const doc = $('.html2pdf__container');
doc.find('.menubar').remove();
doc.find('.unfocusable').remove();
//doc.find($("div[data-classid='DeliveryNameOrderField_org.eclipse.scout.apps.crm.client.crm.ContoClienteForm_InnerFormField_org.eclipse.scout.apps.crm.client.crm.MainClienteForm']").html()).remove();
doc.find('.field has-inner-alignment halign-left valign-top white-space-nowrap').hide();
})
.toPdf().get('pdf')
.then(function(pdf) {
pdf.addPage();
}).set(opt).from(elemClass).toContainer().toCanvas().then(() => {
var doc2 = $('.html2pdf__container');
doc2.find('table-header-item-text').remove();
}).toPdf().save().catch(function(error) {});
});
}
As you see i must to take de "data-classid" generated from scout framework, i can't modify the id and also taht doesn't listen my $(".class") call with jquery. what can i do to hide some elements?
doc.find().hide()/remove() just work for 2 class: menubar and unfocusable, if i add other class, that is not taken.
If this library is not the solution what else can i do?

Html2pdf.js result is blank PDF in vue

I have a vue component and I want to convert this component to PDF file. I used html2pdf.js package but the result is a blank PDF with 3 pages. How can I make it work?
<template>
<div>
<div ref="document">
<h2> hello</h2>
</div>
<button class="btn btn-success text-center" #click="createPDF"> دریافت فایل pdf</button>
</div>
</template>
<script>
import html2pdf from 'html2pdf.js'
export default {
data(){
return{
}
},
props : ['result'] ,
watch: {
},
methods: {
createPDF () {
html2pdf(this.$refs.document, {
margin: 1,
filename: 'document.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { dpi: 192, letterRendering: true , scale: 1 , useCORS: true},
jsPDF: { unit: 'in', format: 'a4', orientation: 'landscape' }
})
}
}
}

How to place single image on multiple pages by jspdf?

I am having html page which contain very lengthy data.
Here, I have to convert html to pdf. I cant able to convert pdf with css by using jspdf
So i have planned. First convert html to png by canvas and then convert png to pdf. I got correct method to do this. I got solution also.
But Problem is After converting png, im not able to place in pdf, Image will be cropped.
This is my code
window.onload = function() {
html2canvas(document.body).then(function(canvas) {
document.getElementById("page1").appendChild(canvas);
document.body.appendChild(canvas);
var context = canvas.getContext("2d");
l = {
orientation: 'p',
unit: 'pt',
format: 'a3',
compress: true,
fontSize: 8,
lineHeight: 1,
autoSize: false,
printHeaders: true
};
var doc = new jsPDF(l, "", "", "");
doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg',0,0)
doc.addPage();
doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg',0,500, 1000, 1000)
window.location=doc.output("datauristring")
});
}
After converting pdf, I am showing in same tab.
I have tried another method.
Divide html page into two section. First section will be in first page in pdf and remaining will be in second page in pdf. After that, I have to shown in browser.
I am not able to do this.
Anyone Can give solution for this one?
l = {
orientation: 'p',
unit: 'pt',
format: 'a3',
compress: true,
fontSize: 8,
lineHeight: 1,
autoSize: false,
printHeaders: true
};
var doc = new jsPDF(l);
doc.addHTML($('elementHTML'),{format:'png',pagesplit: true}});

Categories