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
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?
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
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?
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' }
})
}
}
}
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}});