How to convert html element into pdf and set it at the center of the page.
It is coming at the left top corner of the pdf page
Its not the exact solution but i think it will work . so it will create the pdf page with exact height and width of the html div
const invoiceSection = $("#customer_invoice_bill");
let invoiceName = invoiceSection.data("invoiceName");
var pdfConf = {
pagesplit: true,
background: "#fff",
};
var pdf = new jsPDF("p", "pt", [
invoiceSection.height() + 100,
invoiceSection.width(),
]);
pdf.addHTML(invoiceSection, pdfConf, function () {
pdf.save(`${invoiceName}.pdf`);
});
adding height and width of html div to the jsPDF() parameter works
new jsPDF("p", "pt", [
invoiceSection.height() + 100, ------ > ** adding html div height **
invoiceSection.width(), -------- > ** adding html div width **
]);
Related
hello i am trying to generate multiple page dynamic pdf using html in my react js app. i got all the things right in pdf but the last line text of pages cuts if we set the dynamic pixels for html element it also cut table inside the html sometimes. here is my code
var pdf = new jsPDF({
orientation: "portrait", // landscape or portrait
unit: "mm",
format: "a4"//[250,250],
}
)
let pageHeight=pdf.internal.pageSize.height
pdf.html(html_element, {
callback: function (doc) {
doc.save();
},
x: 15,
autoPaging: "slice",
y: 15,
width: 170, //target width in the PDF document
windowWidth: 650 ,
margin:[10,7,10,7],
});
please help me with this
i have also tried jsdpf html2 convas examples but it did not give bottom margin in pages
I just implemented jspdf in a page, where users work with an editor and then want to be able to print the result. When I tested some example content, I run in to that problem the images are not displayed in there orignial size. They are scaled/displayed so large, that they are lager then the width of the page.
Also I had a problem with the page height/margin-bottom. If the content is to large for a page, then there will be no margin at the bottom of the page. So if for what ever reason an elemtent seems to be too large for a page, this element goes until the end of the page.
I googled a lod, but I couldn't find a solution to avoid that too large elements go until the border of the page.
And I also could not find something, for how to set an image to it's original or max-size when I don't know the content of the page.
Here is js code and an example page: jsfiddle-example
$(".printPdf").click(function () {
var pdfdoc = new jsPDF("portrait");
var getPageTitle = $("#page-title");
var pageTitle = (getPageTitle != "")? getPageTitle : "Document";
var contentClass = ".page-content";
var $pageContent = $(contentClass);
var margins = {
top: 10,
bottom: 20,
left: 15,
width: 180
};
pdfdoc.setDisplayMode('original');
pdfdoc.fromHTML($pageContent.get(0), margins.left, margins.top, {
"width": margins.width,
"text-align": "unset"
}, function () { pdfdoc.save(pdfdoc.pageTitle + ".pdf") }, margins);
});
I have the below code to retrieve the array list of elements to a pdf doc.
I am using A4 size. Since the number of columns are more , I am getting all the data in an ellipsis format.
Is there anyway I can download the doc as a landscape view instead of portrait view, so that I can avoid the ellipsis and I can see all the datas properly ?
As an alternate option I tried to use A1 size, it looks fine as a PDF , but the problem comes when i take a print out of the document as a A4 sheet. The font size is very small after taking the print out. So I want to achieve all the datas to be visible properly without any ellipsis in landscape view with A1. ( This way I will not have any issues in viewing the pdf and also when I take pritnout of the same )
convert() {
const doc = new jsPDF('p', 'pt', 'A4');
const col = ['Discharge Date', 'Case Number', 'Patient', 'Hospital', 'Payee', 'Total Doctor Fee', 'To be Collected', 'Payor', 'Remarks', 'Paid', 'Unpaid'];
const rows = [];
/* The following array of object as response from the API req */
const itemNew = this.finalArList;
itemNew.forEach(element => {
const temp = [element.dischargeDate, element.caseNo, element.patientName, element.instName, element.clinicName, element.formattedTotalDrFee, element.formattedUnpaidAmounr, element.payor, element.remark, element.formattedTotalDrFee, element.formattedUnpaidAmounr];
rows.push(temp);
doc.autoTable(col, rows, {margin: {top: 10}, height: 'auto' });
});
doc.save('MyReport.pdf');
}
Use
new jsPDF('l', 'mm', 'a4');
or
var doc = new jsPDF('landscape');
instead of
new jsPDF('p', 'pt', 'A4');
and then pls chk
i have a question to jsPDF autotable.
My Code:
$('#printBtn').on('click', function() {
var pdf = new jsPDF('p', 'pt', 'a4');
var res = pdf.autoTableHtmlToJson(document.getElementById("tablePrint"));
pdf.autoTable(res.columns, res.data, {
theme : 'plain',
styles: {
fontSize: 12
},
showHeader: 'never',
createdCell: function(cell, data) {
var tdElement = cell.raw;
if (tdElement.classList.contains('hrow')) {
cell.styles.fontStyle = 'bold';
}
}
});
pdf.save("test.pdf");
});
I want add Text before and after the Table from a div.
I have found this Code Snippet in jsPDF autotable examples:
var before = "text before";
pdf.text(before, 14, 30);
This code works good. I have insert that before pdf.autoTable(...});.
But i dont know what the number 14 and 30 for?
Then i have the code insert after the pdf.autoTable function call and the Text printed on the last page of pdf but on the top of the page, not on the end, why?
Sorry for my bad englisch.
Thanks for help.
If what you want is to add something before you must first move the table that you are adding with autotable, you achieve this by adding a startY: 150 attribute within doc.autotable:
pdf.autoTable(res.columns, res.data, {
theme : 'plain',
styles: {
fontSize: 12
},
startY: 150,
showHeader: 'never',
createdCell: function(cell, data) {
var tdElement = cell.raw;
if (tdElement.classList.contains('hrow')) {
cell.styles.fontStyle = 'bold';
}
}
});
150 is the value in pixels you want to move. Above this you can place the text you want with the code you placed.
var before = "text before";
pdf.text(before, 14, 30);
Now the values of 14 (Value in Y) and 30 (Value in Y) are the values that you want the text to move in pixels.
In order for you to add text after the table you must first obtain in which number of pixels your table ended and from there enter the text you want.
let finalY = pdf.previousAutoTable.finalY; //this gives you the value of the end-y-axis-position of the previous autotable.
pdf.text("Text to be shown relative to the table", 12, finalY + 10); //you use the variable and add the number of pixels you want it to move.
Here's my stab at an answer:
So this is your Autotable's function call:
var pdf = new jsPDF('p', 'pt', 'a4');
Since jsPDF Autotables is based on jsPDF, you'll have to go here:
pt is a unit of measurement called points, so 14 and 30 are points. At the first position, 14, moves elements left and right. The second position, 30, moves elements down and up. I'm guessing they're like pixels(px). Seems like you have to move your text to your desired locations by using points.
An idea that helped me is to placing a Table with no content on the position where you would like to add the new table.
autoTable(doc, {
body: [],
startY: finalY + bias
});
Im trying to get my jspdf to not save a blank page PDF. I been trying many examples, but nothing works :(. My table content is saved correct, with a image on the second page of the PDF, but my first page is blank.
var pdf = new jsPDF('o', 'pt', 'a6');
//pdf.autoTable(this.columns, this.data);
//var width = pdf.internal.pageSize.width;
//var height = pdf.internal.pageSize.height;
pdf.addPage('1800','900');
pdf.addImage(imgData, 'PNG', 120, 40, 120, 100);
pdf.setTextColor(0,0,0);
pdf.text(120, 20, 'BOOKINGS');
pdf.setFontSize(22);
// 'o', 'pt', 'a4'
// '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 = jQuery('.dataTables_wrapper')[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: 120,
bottom: 0,
left: 0,
width: 2000
};
// 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('bookings.pdf');
}, margins);
}
The first page is blank because adding a page is the first call you make after calling the jsPDF constructor. The constructor does already create a (first) blank page. To get rid of the additional empty page at the start of the document, either delete the first page calling doc.deletePage(1), or do not add a page after the constructor is being called.