Develop Reference

How to add a Custom Font to Dynamic data in PDF document by using jsPDF?

I've tried to convert dynamic webpage to PDF by using jsPDF it worked for me and now I wants to change the font family of PDF by using jsPDF. Is there any option. Please let me know. Thanks!
Below my code
<div id="#preview-details">dynamic data goes here..</div>
<button id="downloadPDF">Print</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#downloadPDF').click(function () {
doc.fromHTML($('#preview-details').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('pdfdoc.pdf');
});
</script>

As I know you have to download the font as a ttf format, then you need to add it into your code like the following code:
 // add custom font to file
doc.addFont("ConsolasHex.ttf", "ConsolasHex", "Bold");
doc.setFont("ConsolasHex","Bold");
doc.setFontSize(12);
The page in this URL has explain it enter link description here

Unable to convert HTML to PDF using jsPDF

I'm able to download a PDF using jsPDF but the downloaded PDF is plain text excluding the styles applied in the website.
I am unable to get the styles or formatting in the website to the downloadable PDF.
Here's the jsPDF code I use:
<button type="button" onclick="convert()" class="pda-button"><i class="save-icon sprite"></i> Save</button>
<div id="content">
//content goes
</div>
<div id="elementH"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://demos.codexworld.com/includes/js/bootstrap.js"></script>
<script src="http://demos.codexworld.com/3rd-party/jsPDF/dist/jspdf.min.js"></script>
<script>
function convert() {
var doc = new jsPDF();
var elementHTML = $('#content').html();
var specialElementHandlers = {
'#elementH': function (element, renderer) {
return true;
}
};
doc.fromHTML(elementHTML, 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
// Save the PDF
doc.save('sample-document.pdf');
}
</script>
Here's the link to website I integrated the above code and want to convert to PDF:
Website's link
As I click on save button on the top left of the site to download PDF, the PDF is generated and downloaded but as an plain text PDF with no styles.
And Please do not Down-Vote the post without explaining the reason for doing so..

You need to give a callback function to the method doc.fromHTML
doc.fromHTML(elementHTML, 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
}, function cb() {} );
cb() will tell you that the pdf is ready.

How to make a HTML page as Downloadable PDF

I want to make Something like this:
There will be a form and after filling the form and press submit it will go to the preview of the Page with all filled Info. I know how to do all those including the print Button using JS. But I wanted to add a Download button on that page which will download that page As PDF. Is it possible ? If anybody can help me that will be very helpful.
Thanks in advance.

I've been looking at doing this with one of my sites and found this code helpful.
https://codepen.io/AshikNesin/pen/KzgeYX
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});

Well, I think it is very "simple".
You can use some libraries or classes like this:
https://parall.ax/products/jspdf
Example:
Extract div from you current webpage:
// pick you DOM element and extract HTML as String
const html = document.querySelector("#element").innerHTML;
const pdf = new jsPDF('p', 'en', 'letter');
const handlers = {audio: () => false};
const config = {top: 80, bottom: 60, left: 40, width: 522};
pdf.fromHTML(
html,
config.left,
config.top,
{config.width, handlers},
(dispose) => pdf.save('example.pdf'),
config
);

Html to pdf Jspdf

When I'm converting my html div to pdf using Jspdf library the generated pdf
is not showing the whole content of mydiv.It only shows little html but not complete div. What I am missing in this ?
<button id="b2">Export to pdf</button>
<script>
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#b2').click(function () {
doc.fromHTML($('#mydiv').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
</script>

Things you can do:
Check if your IDs are correct: #editor for the specialElementHandlers and #mydiv in the click function?
Check the Javascript console for errors
Check examples like this or questions like this to find any errors

html tables to pdf export producing blank pdf file using jspdf

using this code generating pdf
$(function () {
console.log('run fn');
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
$(this).val('Pending Request');
var doc = new jsPDF();
doc.fromHTML($('#target').html(), 15, 15, {
'width': 170, 'elementHandlers': specialElementHandlers
});
doc.save('report-file.pdf');
});
});
and i have multiple html table i want to display them in pdf but this code producing blank pdf. while if i remove html tables and write simple text then that text is showing.
i have also tried this another code (using ) but this is not showing in well format columns are mingled with each other
As PDF