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
});
}});
Related
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 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);
}
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?
I want to convert some of my divs into PDF and I've tried jsPDF library but with no success. It seems I can't understand what I need to import to make the library work. I've been through the examples and I still can't figure it out. I've tried the following:
<script type="text/javascript" src="js/jspdf.min.js"></script>
After jQuery and:
$("#html2pdf").on('click', function(){
var doc = new jsPDF();
doc.fromHTML($('body').get(0), 15, 15, {
'width': 170
});
console.log(doc);
});
for testing purposes but I receive:
"Cannot read property '#smdadminbar' of undefined"
where #smdadminbar is the first div from the body.
you can use pdf from html as follows,
Step 1: Add the following script to the header
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
or download locally
Step 2: Add HTML script to execute jsPDF code
Customize this to pass the identifier or just change #content to be the identifier you need.
<script>
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 = $('#content')[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
);
}
</script>
Step 3: Add your body content
Run Code
<div id="content">
<h1>
We support special element handlers. Register them with jQuery-style.
</h1>
</div>
Refer to the original tutorial
See a working fiddle
You only need this link jspdf.min.js
It has everything in it.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
According to the latest version (1.5.3) there is no fromHTML() method anymore.
Instead you should utilize jsPDF HTML plugin, see: https://rawgit.com/MrRio/jsPDF/master/docs/module-html.html#~html
You also need to add html2canvas library in order for it to work properly: https://github.com/niklasvh/html2canvas
JS (from API docs):
var doc = new jsPDF();
doc.html(document.body, {
callback: function (doc) {
doc.save();
}
});
You can provide HTML string instead of reference to the DOM element as well.
This is finally what did it for me (and triggers a disposition):
function onClick() {
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.canvas.height = 72 * 11;
pdf.canvas.width = 72 * 8.5;
pdf.fromHTML(document.body);
pdf.save('test.pdf');
};
var element = document.getElementById("clickbind");
element.addEventListener("click", onClick);
<h1>Dsdas</h1>
<a id="clickbind" href="#">Click</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
And for those of the KnockoutJS inclination, a little binding:
ko.bindingHandlers.generatePDF = {
init: function(element) {
function onClick() {
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.canvas.height = 72 * 11;
pdf.canvas.width = 72 * 8.5;
pdf.fromHTML(document.body);
pdf.save('test.pdf');
};
element.addEventListener("click", onClick);
}
};
how about in vuejs how is it applicable?
function onClick() {
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.canvas.height = 72 * 11;
pdf.canvas.width = 72 * 8.5;
pdf.fromHTML(document.body);
pdf.save('test.pdf');
};
var element = document.getElementById("clickbind");
element.addEventListener("click", onClick);
<h1>Dsdas</h1>
<a id="clickbind" href="#">Click</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
Shouldn't you also be using the jspdf.plugin.from_html.js library? Besides the main library (jspdf.js), you must use other libraries for "special operations" (like jspdf.plugin.addimage.js for using images). Check https://github.com/MrRio/jsPDF.
first, you have to create a handler.
var specialElementHandlers = {
'#editor': function(element, renderer){
return true;
}
};
then write this code in click event:
doc.fromHTML($('body').get(0), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
var pdfOutput = doc.output();
console.log(">>>"+pdfOutput );
assuming you've already declared doc variable.
And Then you have save this pdf file using File-Plugin.