Here is the code to generate PDF from HTML using jQuery and jspdf.There are no events occurs when the "download pdf" button clicks.
jquery:
$(document).ready(function() {
$('#download_pdf').click(function(e) {
e.preventDefault();
var pdf = new jsPDF('p', 'pt', 'letter'),
source = $('#table_stock')[0],
specialElementHandlers = {
'#table_stock': function(element, renderer) {
return true
}
}
margins = {
top: 60,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source, margins.left, margins.top, {
'width': margins.width,
'elementHandlers': specialElementHandlers
},
function(dispose) {
pdf.save('Stockreport.pdf');
},
margins
)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stock_report" id="table_stock"></div>
<button id="download_pdf" class="btndownloadt_stock_report btn btn-primary">Download PDF</button>
You have not included the lib include the lib as following because after adding this lib there is no error.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js'></script>
Another thing just use $('#table_stock') there is no requirment of [0], if you are using class selector then $('.stock_report')[0].
Related
I'm trying to export the table to PDF file but if there are Hebrew characters it wont display them correctry.
I've tried to add mata tag of UTF-8 in the HEAD section and also with php header of 'Content-Type: text/html; charset=utf-8'
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#customers')[0];
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function (element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 10,
width: 300
};
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Test.pdf');
}, margins);
}
You are exporting HTML of a specific element to a PDF file, this HTML is not containing any header information, so you should add this information before you export it to pdf. Here you can see an example how to add the utf-8 information.
pdf.fromHTML(
'<html><head><meta charset="utf-8" /><body>' + source + '</body></html',
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
}
...
);
I think you can use dir="rtl" for more info please go through this below link
https://developers.itextpdf.com/ja/node/2079
Ok, I have scoured the internet for a solution to this but I can't find anything. I am trying to find a way to save the contents of an iframe as a PDF. I am always running into an issue where the PDF is just blank. It seems that jsPDF is the only way. I'm kind of wondering if the reason this isn't working is because of the fromHTML() function. I'm not sure. If any of you have figured out a solution I would be very appreciative!!
Here is some sample code you can try in an HTML file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script>
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#frame')[0];
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width': margins.width,
'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Test.pdf');
}, margins);
}
</script>
<button onclick="javascript:demoFromHTML();">PDF</button>
<iframe id="frame" src='https://wikipedia.org/wiki/Main_Page' style="width: 75%;height: 75%;"></iframe>
Go through this article : Convert HTML/CSS Content to a Sleek Multiple Page PDF File Using jsPDF JavaScript library. The provided script allows you to convert any HTML element to PDF. I modified the generate() function slightly so that it takes any HTML element id name and export it as PDF file:
generate = function(doc)
{
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.setFontSize(18);
pdf.fromHTML(document.getElementById(doc),
margins.left, // x coord
margins.top,
{
// y coord
width: margins.width// max width of content on PDF
},function(dispose) {
headerFooterFormatting(pdf, pdf.internal.getNumberOfPages());
},
margins);
var iframe = document.createElement('iframe');
iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:650px; padding:20px;');
document.body.appendChild(iframe);
iframe.src = pdf.output('datauristring');
};
It works 100% on Chrome but Im not sure about other browsers.
Try this solution.
<button id="generatePDF">Generate PDF</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( '#generatePDF' ).click( function()
{
var pdf = new jsPDF('a4');
pdf.text("Some text inside PDF", 10, 10);
$( '#docpdf' ).attr('src', pdf.output('datauristring'));
});
</script>
<iframe id="docpdf" style="background-color:#EEE; height:400px;">
PDF goes here
</iframe>
A wild guess here but I think this has to do with the fact that Iframes from other domains are protected.
Read into 'cross-domain policy', if it's the cause I'm quite sure you can't work around it very easy.
try
var source = window.document.getElementsByTagName(tagName)[0];
instead of
source = $('#frame')[0];
I wanted to print html table to a pdf file using javascript. for that I am using jspdf lib. and i have created this example
$(document).on('click', '#pdfbutton', function(event) {
var pdf = new jsPDF('p', 'pt', 'letter'),
source = $('#printit')[0],
specialElementHandlers = {
'#bypassme': function(element, renderer) {
return true
}
}
var margins = {
top: 20,
bottom: 30,
left: 20,
width: 700
};
pdf.fromHTML(
source // HTML string or DOM elem ref.
, margins.left // x coord
, margins.top // y coord
, {
'width': margins.width // max width of content on PDF
,
'elementHandlers': specialElementHandlers
},
function(dispose) {
pdf.save('Test.pdf');
},
margins
)
});
https://jsfiddle.net/6hngty42/
Now when I print the pdf it is showing me the different format of the html table.
how can i preserve the html and css to pdf?
or
how can I format the table using jspdf?
or
Is there any other js library which can print pdf to html with css offline (I checked cloudformatter but it works online)?
FYI: I have checked other example also but none of the solution is useful for me.
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 am working on codeigniter. I want to add save to pdf functionality to one of the div. I am using html2canvas to print it. My problem is I want to add a logo & some other information at the header of the pdf, which is not visible on the webpage. I dont know how to do this. Below is my code.
<script type='text/javascript' src="<?php echo site_url('assets/js/html2canvas.js'); ?>"></script>
<script type='text/javascript' src="<?php echo site_url('assets/js/jspdf.debug.js'); ?>"></script>
<script type='text/javascript'>//<![CDATA[
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#content')[0], function () {
pdf.save('test.pdf');
});
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = {
top: 30,
bottom: 30,
left: 30,
width: '100%'
//color: '#000'
};
pdf.addHTML()(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('test.pdf');
}, margins);
}
</script>
<div id="content">
Save this to PDF
</div>
Pls help.
Before calling to addHTML, you can add images or text to your jsPDF object:
var pdf = new jsPDF('p','pt','a4');
var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAXwBfAAD/2wBDAAoHBwkHBgoJCAkLCwoMDxkQDw4ODx4WFxIZJCAmJSMgIyIoLTkwKCo2KyIjMkQyNjs9QEBAJjBGS0U+Sjk/QD3/2wBDAQsLCw8NDx0QEB09KSMpPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT3/wgARCAAaABQDAREAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAABQYAAwQB/8QAGAEBAQEBAQAAAAAAAAAAAAAAAwEAAgT/2gAMAwEAAhADEAAAAXKbOK1c92KOHzuQcxaHNjdidpy5yl//xAAfEAACAQMFAQAAAAAAAAAAAAABAgADEhMEEBEhIjH/2gAIAQEAAQUC+QuVq6duEqnoephWKDia/FLjLjt//8QAHREAAgIBBQAAAAAAAAAAAAAAAAIBEQMSEyAiMf/aAAgBAwEBPwEhIZLj2DOttcCkNp7G8xZfH//EAB4RAAIDAAEFAAAAAAAAAAAAAAABAgMREiAhIjFR/9oACAECAQE/AR2ONmS9MolkcZZ8aHDl4b2FTEaEun//xAAhEAABAwMEAwAAAAAAAAAAAAABAAIRAxAxEjJBQiFhYv/aAAgBAQAGPwJQ7acIg8FQWFzfS0B0t+shcpkNqHx1KqahU29rZKybf//EAB0QAQADAQACAwAAAAAAAAAAAAEAESExQVFhgZH/2gAIAQEAAT8hUFrUE1U6+ZZvXITcrvpNdp4xEO+l1b7Gv7BQdYMALdXDkpwD7ipT+kOT/9oADAMBAAIAAwAAABBnmCSOz//EABsRAQACAwEBAAAAAAAAAAAAAAEAESExYSBx/9oACAEDAQE/EAXUQdz5KIsIMuNjTLWFPNMVwaOQoRsVXn//xAAcEQEAAgIDAQAAAAAAAAAAAAABABEhMSBhcVH/2gAIAQIBAT8QUMsIdQ9/JZNpSUTIImK3bZ5AbtfZa3cpbvj/AP/EABwQAQACAwEBAQAAAAAAAAAAAAEAESExQXFRwf/aAAgBAQABPxCsIatahd4Y+dDAb93fjD4HtO4qLlXU0ej2pdETsO11xEdV8cP2hExkSA2d3NHkA0Q0CIxSEyKmjyf/2Q==';
pdf.addImage(imgData, 'JPEG', 20, 20, 20, 26);
pdf.text(50, 40, "Header");
pdf.addHTML(document.body,40,100,function() {
pdf.save('web.pdf');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<body>
<p id="to-pdf">HTML content...</p>
</body>
Images must be encoded with base64. You can use this tool for that: http://dataurl.net/#dataurlmaker