draw a header-less table using jspdf autotable - jspdf

I'm looking to draw a header-less table using jspdf autotable
I know i have to return false in drawHeader, but this name after v3.0.0 had change.
Any help would be appreciated.

var doc = new jsPDF('p', 'pt');
doc.text(20,20,'title');
var res = doc.autoTableHtmlToJson(table);
doc.autoTable(res.columns, res.data,{
theme: 'grid',
showHead: 'never'
});
doc.save("name.pdf");

Related

Text under image not printed properly if the td contains an image in Jspdf autotable

This is my table td This is the pdf rendered using autotable. I want to display the image first and then the text under it. Any help will be appreciated. Thanks in advance.
What I did try is the below code.
didDrawCell: function(data) { if (data.column.index === 3 && data.cell.section === 'body') { var td = data.cell.raw; var img = td.getElementsByTagName('img')[0]; var dim = data.cell.height - data.cell.padding('vertical'); var textPos = data.cell.textPos; if(img){ doc.addImage(img.src, textPos.x, textPos.y, dim, dim); } } },

How do I convert specific Divs to Pdf using jsPDF in angular

I'm trying to convert a a specific set of divs into a pdf using jsPDF.
This is what I have so far.
function to convert:
makePdf() {
const pdf = new jsPDF('p', 'px', 'a4');
pdf.canvas.height = 1020;
pdf.canvas.width = 800;
const self = this;
pdf.html(this.el.nativeElement, {
callback: (pdf) => {
pdf.save("Summary.pdf")
}
})
}
How do I select the Divs I wanna convert?

jsPDF get the generated document as base64

I´m trying to generate a PDF on my application, using something like this, from documentation:
var doc = new jsPDF();
doc.html(document.body, {
callback: function (doc) {
doc.save();
}
});
But what I need is to get this generated file, as a base64 content, to send as an attachment on an email. Is there a way to get this directly on callback?
It's worth noting that the datauri option changes the document location, see the following snippet from jsPDF lib:
case 'datauri':
case 'dataurl':
return global.document.location.href = datauri;
This is fine unless you are trying to use an IFrame, as it would cause its body to be replaced by an embed tag displaying the pdf just generated.
Instead, the safest option is to use datauristring as this simply returns the pdf in a base64 string:
var pdf = new jsPDF('p', 'pt', 'a4');
var base = pdf.output('datauristring'); // base64 string
console.log("base64 is ", base);
Honestly, I don't know why anybody would want to use the datauri option instead of datauristring as latter's behaviour it's what most people expect anyway.
You can do like below.
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.html(document.getElementById('doc'), {
callback: function (pdf) {
// example text
pdf.text(20, 20, 'Hello world!');
pdf.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
var base = pdf.output('datauri'); // directly to base664
console.log("base64 is ");
console.log(base);
// you can generate in another format also like blob
var out = pdf.output('blob');
var reader = new FileReader();
reader.readAsDataURL(out);
reader.onloadend = function() { // for blob to base64
base64data = reader.result;
console.log("base64 data is ");
console.log(base64data );
}
pdf.save('DOC.pdf');
}
})
You can see more on output() method in the following link.
jspdf output() source code

Improve Jspdf quality

when we use addHTML(), generated pdf quality is poor.
To improve quality, I write this code.
var pdf = new jsPDF('l', 'in', 'a4');
pdf.internal.scaleFactor = 30;
pdf.addHTML($('#print-area')[0], function () {
pdf.save(calendarName);
});
This may help someone
when we use addHTML(), generated pdf quality is poor.
To improve quality, I write this code.
var pdf = new jsPDF('l', 'in', 'a4');
pdf.internal.scaleFactor = 30;
pdf.addHTML($('#print-area')[0], function () {
pdf.save(calendarName);
});
This may help someone

How do we convert HTML page to a pdf file using jspdf including images and css styles?

Below code will generate a pdf which contains only text and does not include any images or styles.
var doc = new jsPDF();
var source = document.getElementById("dividofhtml");
doc.fromHTML(source,15,15);
doc.save();
The below code will include images and css styling in pdf.
html2canvas($("#up"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 0, 0);
doc.save('text.pdf');
}
});

Resources