Hello Im trying to save my html page to PDF and I have this code:
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>
<script>
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');
});
// This code is collected but useful, click below to jsfiddle link.
</script>
I uploaded to jsFiddle and works... but when I try it in my browser doesnt works and I get the error doc.fromHTML is not a function. I have the jQuery and jsPDF references exactly like jsFiddle.
Example Code
The fromHTML function was replaced by html in 2.0.0. Unfortunately, the typings currently still contain the fromHTML method but a fix is under way.
Add External libraries - Jquery and Jspdf js files with script tags
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
Codepen - http://codepen.io/nagasai/pen/JKKNMK
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.
I have submitted a form resulting in a webpage, I need to download that webpage in any format.
How can I do that?
Ya its very easy to do with javascript. Hope this code is useful to you.
Yes, Use jspdf To create a pdf file.
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>
<script>
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');
});
// This code is collected but useful, click below to jsfiddle link.
</script>
I am trying to create an PDF file from a PHP page with jsPDF but it is not working and I dont know whats wrong.
Can someone help me?
First I have a Iframe. The page I want to convert is displayed in the Iframe:
Iframe:
<?php
<iframe id="frame" name="frame" width="100%" height="1160px" frameborder="0" src="./page.php?id=' . $_GET['id'] . '"></iframe>
<button id="cmd">Button</button>
?>
When I hit Button the following script should convert the page to PDF
Script
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script type="text/javascript">
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function(element, renderer){
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('frame').get(0), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
</script>
But when I hit Button. Nothing is happening. Does someone know whats wrong?
You must be get html of iframe, so use contents() function and then get documentElement of iframe:
<iframe id="frame" name="frame" width="100%" height="1160px" frameborder="0" src="http://localhost/"></iframe>
<button id="cmd">Button</button>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script type="text/javascript">
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function(element, renderer){
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('#frame').contents().find('html').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
</script>
Note: If your iframe source page or part of it protected with x-frame-options header, you cannot access to html of it.
<button onclick="cmd()">Button</button>
Change this to
<button id="cmd">Button</button>
You are calling the click event in JS on the id. Or change the onclick event to a function with the name cmd.
Apparently, jsPDF has limitations and/or bugs. It has problems with complex tables (especially with colspans). It throws javascript errors which stops the renderer which is why you're getting blank pdfs.
https://github.com/MrRio/jsPDF/issues/516
https://github.com/MrRio/jsPDF/issues/595
A fork has been posted here: https://github.com/jutunen/jsPDF-table_2 but I'm not sure if it addresses other limitations of jsPDF.
I came across jsNode library here Generate pdf from HTML in div using Javascript
So I've installed. I'm tryna use it to print a leaflet map. It seems I was not able to set it propely. It create the PDF but nothing shows on the map. Could you help me with that ?
Javascript
function genPDF() {
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function(element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("div")[0];
doc.fromHTML(
source,
15,
15, {
'width': 180,
'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
}
HTML
<html>
<body onload="Create_MAP();">
<div id="map">
</div>
<input type="button" class="bt" value="PRINT PDF" onclick="genPDF();">
</body>
</html>
You need to turn your leaflet map into an image first.
You can use https://github.com/mapbox/leaflet-image
Then add that image to jsPDF for export.