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
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'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.
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
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.
I'm using jsPDF to convert html to pdf. When a page has a lot of text I just got a blank pdf or a gray page with no contentsanf data: in url
I have no errors in console.
How can I make it print pdf correctly?
To convert to pdf I use this code:
$(document).ready(function(){
var specialElementHandlers = {
'#editor': function (element,renderer) {
return true;
}
};
$('#topdf').click(function () {
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function(element, renderer){
return true;
}
};
doc.fromHTML($('.post-content p').get(0), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.output("dataurlnewwindow");
});
});
The problem is in length of URL limit 2000 chars (more here: What is the maximum length of a URL in different browsers?), so I suggest you to use doc.output('save', 'filename.pdf') but this have limitation (more: How to open generated pdf using jspdf in new window)