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.
Related
I want to create a pdf of div and then want to print that pdf.
Inside div there is two div
1st div contents table
2nd div contents image.
<div id="printableDiv">
<div id="1st">
<table>
</table>
</div>
<div id="2nd">
<img>
</div>
</div>
I tried with below code
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF('p', 'pt', 'a4');
var width = pdf.internal.pageSize.getWidth();
var height = pdf.internal.pageSize.getHeight();
pdf.addImage(imgData, 'JPG', 10, 10, width, height);
for (var i = 1; i <= totalPDFPages; i++) {
pdf.addPage(PDF_Width, PDF_Height);
pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 4), canvas_image_width, canvas_image_height);
}
but here it will create a jpeg image and then add it to pdf,
but I want to add html content directly to pdf.
Thanks in advance
You can search for that question on google or stackoverflow and already find answers that can help you.
For example, see:
Export HTML table to pdf using jspdf
Here is a jsfiddle link with a working example:
Export HTML table to PDF
The relevant function to call is fromHTML(), which is hopefully self-explanatory.
Code from the jsfiddle (in this example, the HTML table has id customers):
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $('#customers')[0];
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
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: 700
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
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) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
}, margins);
}
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
I have a link on my site to a pdf I'd like visitors to be able to view - but when clicked on, it has to be downloaded to be opened.
How can I get around this?
Ideally, I want to make it as easy as possible for potential clients - when they click on the link - it opens another tab/window with the pdf open.
var pdf = new jsPDF('p', 'pt', 'letter');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $('#customers')[0];
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
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: 40,
width: 522
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
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) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
}, margins);
And link of that code is in this jsfiddle file is here.
http://jsfiddle.net/xzZ7n/4861/
Use this one doc.output('dataurlnewwindow');.
instead of pdf.save('Test.pdf');
I have a need to create a pdf straight from the source of my html page, which is does successfully, but now I need to get the formatting right. What I want, is to be able to add a new page every time a <p class="form-control-static"></p> pops up in the source.
I have checked the documentation and some other stack overflow answers but these are all for adding pages when the content is static and you can create it yourself. My content is changing all the time.
I am using jsPDF to achieve all of this. I am aware of the pdf.addPage() command yet I am not sure how to add pages depending on a condition. My current code as follows:
$('#downloadPDF').click(function () {
$('#report').width(522);
$('.img-thumbnail').width(522).height(348);
var pdf = new jsPDF('p', 'pt', 'letter')
, source = $('#report')[0]
, specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
}
margins = {
top: 20,
bottom: 20,
left: 40,
width: 550
};
pdf.fromHTML(
source
, margins.left
, margins.top
, {
'width': margins.width
, 'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Job Report - ' + #ViewData["jobid"] + '.pdf');
},
margins
)
});
Obviously it has something to do with the source variable containing the html or am I mistaken?
How to break words in Headers in PDF file, while generating PDF using jsPDF(i.e. I want to break the headers like "Hello World" into two lines) and how to set font size in jsPDF.
I have tried with pdf.setFontSize(12); , but it does not work for me.
Any help would be appreciated. Thanks.
code:
var pdf = new jsPDF('l', 'pt', 'a3')
, source = $('#TableId')[0]
, specialElementHandlers = {
}
, margins = { top: 20, bottom: 20, left: 30, width: 922 };
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
)
If you want to split hello and world on two different lines, add a newline \n between hello and world: "hello\nworld"
Example:
var pdf = new jsPDF();
pdf.setFontSize(12);
pdf.text(10, 10, "Hello\nWorld");
Or add two text fields:
doc.text(10, 10, "Hello");
doc.text(10, 25, "World");
ps. It would even more help if you could post all your code.
If You use FromHtml and your Text spent more than one Page, so you can add after the Text :
<!-- ADD_PAGE -->
But you should use the Jspdf from Mrrio libary
Link : Download the Jspdf