I want to export a part of my html code to pdf, for this I am using the following code :
<script language = "JAVASCRIPT">
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#download').click(function () {
doc.fromHTML($('#mytable').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
</script>
but it doesn't support CSS .. how can I export it with its style ?
What data do you want to export?
If you want to export an HTML <table>, you can take a look at this export sample provided by the Shield UI Grid widget.
Related
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
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
);
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
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
I have a client that can not use jQuery for any reason, is jsPDF dependent on jQuery or is there a way to specify use pure javascript?
The latest version of jsPDF has removed the dependence on jQuery, the version I used is v1.5.3. You can view the demo on CodePen:
CodePen Demo
<!-- load only jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
// Use it now!
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
var cmd = document.querySelector('#cmd');
cmd.addEventListener("click", function () {
var contentContainer = document.querySelector('#content');
doc.fromHTML(contentContainer.outerHTML, 15, 15, {
'width': 70,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});