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?
Related
I want to make Something like this:
There will be a form and after filling the form and press submit it will go to the preview of the Page with all filled Info. I know how to do all those including the print Button using JS. But I wanted to add a Download button on that page which will download that page As PDF. Is it possible ? If anybody can help me that will be very helpful.
Thanks in advance.
I've been looking at doing this with one of my sites and found this code helpful.
https://codepen.io/AshikNesin/pen/KzgeYX
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');
});
Well, I think it is very "simple".
You can use some libraries or classes like this:
https://parall.ax/products/jspdf
Example:
Extract div from you current webpage:
// pick you DOM element and extract HTML as String
const html = document.querySelector("#element").innerHTML;
const pdf = new jsPDF('p', 'en', 'letter');
const handlers = {audio: () => false};
const config = {top: 80, bottom: 60, left: 40, width: 522};
pdf.fromHTML(
html,
config.left,
config.top,
{config.width, handlers},
(dispose) => pdf.save('example.pdf'),
config
);
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.
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 want to transform a Meteor template into a PDF file. I found this package using this library that transform HTML into PDF.
The problem is... I don't understand how to get the HTML of my template. I have for the example a test template (in Jade) :
template(name="test")
h1 Title 1
p Hello, world!
And these functions (according to the tutorial) :
var specialElementHandlers = {
'#bypassme': function(element, renderer)
{
return true;
}
};
Template.autotest_verdict_content.events({
"click #generate-pdf": function ()
{
var doc = new jsPDF('p', 'in', 'letter');
var source = $("#verdict-content").get(0); // I tried this (from a rendered template)
var source = Template.test; // And this (the template I want to transform)
doc.fromHTML(source, 0.5, 0.5,
{
'width': 7.5,
'elementHandlers': specialElementHandlers
});
doc.output('dataurl');
}
});
I only create a PDF file with "undefined" string in it. I think I misunderstood how Template works... Can someone explain it to me ?
Why can't you do sth like this (as stated in package docs):
Template.autotest_verdict_content.events({
"click #generate-pdf": function (){
Blaze.saveAsPDF(Template.test, {
filename: "test.pdf", // optional, default is "document.pdf"
x: 0, // optional, left starting position on resulting PDF, default is 4 units
y: 0, // optional, top starting position on resulting PDF, default is 4 units
unit: "in", // optional, unit for coordinates, one of "pt", "mm" (default), "cm", or "in"
format: "letter" // optional, see Page Formats, default is "a4",
elementHandlers: specialElementHandlers
});
}});
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