Develop Reference

Create a pdf of div and then print using javascript

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);
}

How to generate a PDF from a HTML Table?

Here is my code, I have received all the rows but the issue with design not showing properly. Second page mixed with header and 11 th row..
$scope.generatePDF = function () {
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 = $('#div_print')[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: 10,
left: 10,
width: 800
};
// 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('PriceList.pdf');
}, margins);
}
Here I used:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script src="../Scripts/Pdf.js"></script>
Here is my result

HTML + CSS to PDF without losing the format

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.

Only view PDF file online

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');

Cannot get jsPDF to build and output a PDF document using a custom HTML string

I need your help,
If I refer to the following JSFiddle example: it function creates a nice PDF with a table in it that is already "prebuilt".
However, if I were to introduce a custom HTML string into the equation, the function goes stale mate and does nothing, no errors, no nothing. Why is this? The idea/concept does not seem farfetched to me? Here is the JSFiddle that I refer.
Here is the function in question:
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 = '<html><head></head><body><p>this is fun!</p></body></html>'
// 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);
}