Total pages not working with jsPDF and jsPDF-autotable
Question
There's a few questions out there that are related, but I seem to be following everything properly as far as I can see. Am I missing something here?
Basically, I'm using jsPDF and jsPDF-autotable to generate an invoice with multiple lines. The code works, just that I continue to get "Page 1 of {total_pages_count_string}" instead of the actual count. Here's what it looks like:
Here's a snippet of what I'm attempting to do:
module.exports = function pdfDownload(jsPDF, print, invoiceData, fs, nodemailer) {
var doc = new jsPDF({
format: 'letter',
orientation: 'p'
});
var systemVars = invoiceData.SystemVars;
var invoiceData = invoiceData.OrderDetails;
var totalPagesExp = "{total_pages_count_string}";
// Full page table
doc.autoTable({
didDrawPage: function (data) {
var pageCount = doc.internal.getNumberOfPages()
// Total page number plugin only available in jspdf v1.0+
if (typeof doc.putTotalPages === 'function') {
pageCount = "Page " + pageCount + " of " + totalPagesExp;
}
// Header
doc.setFontSize(10);
doc.setTextColor(40);
doc.setFont('helvetica');
doc.text(invoiceLocationName + "\n" + invoiceLocationAddr1 + "\n" + invoiceLocationAddr2 + "\n" + invoiceLocationCSZ, data.settings.margin.left, 15);
doc.text("Phone: " + invoiceLocationPhone, data.settings.margin.left + 187, 15, {
align: 'right',
valign: 'right'
});
if (base64Img) {
doc.addImage(base64Img, 'PNG', data.settings.margin.left + 65, 10, 50, 18);
}
doc.autoTable({
styles: {
lineWidth: 0.2,
lineColor: 0,
fontSize: 8,
overflow: 'ellipsize',
fillColor: false
},
alternateRowStyles: {
fillColor: false
},
bodyStyles: {
fillColor: false,
textColor: 0,
},
startY: 30,
columnStyles: {
0: {
cellWidth: 32
},
1: {
cellWidth: 32
},
2: {
cellWidth: 32
},
3: {
cellWidth: 32
},
4: {
cellWidth: 29.68
},
5: {
cellWidth: 30
}
},
body: [
[{
content: 'Sold To',
colSpan: 2,
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
}, {
content: 'Ship To',
colSpan: 2,
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
}, {
content: 'PO Date',
styles: {
fontStyle: 'bold',
halign: 'right',
fillColor: [220, 220, 220]
}
}, {
content: invoiceOrderDate
}],
[{
content: invoiceSoldTo1 + '\n' + invoiceSoldTo2 + '\n' + invoiceSoldTo3 + '\n' + invoiceSoldTo4 + '\n' + invoiceSoldTo5,
colSpan: 2,
rowSpan: 4
}, {
content: invoiceShipTo1 + '\n' + invoiceShipTo2 + '\n' + invoiceShipTo3 + '\n' + invoiceShipTo4 + '\n' + invoiceShipTo5,
colSpan: 2,
rowSpan: 4
}, {
content: 'Invoice Number',
styles: {
fontStyle: 'bold',
halign: 'right',
fillColor: [220, 220, 220]
}
}, {
content: invoiceInvoiceNo
}],
[{
content: 'Order Number',
styles: {
fontStyle: 'bold',
halign: 'right',
fillColor: [220, 220, 220]
}
}, {
content: invoiceOrderNo
}],
[{
content: 'Invoice Date',
styles: {
fontStyle: 'bold',
halign: 'right',
fillColor: [220, 220, 220]
}
}, {
content: invoiceInvoiceDate
}],
[{
content: 'Invoice Type',
styles: {
fontStyle: 'bold',
halign: 'right',
fillColor: [220, 220, 220]
}
}, {
content: invoiceInvoiceType
}],
[{
content: 'Customer PO',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
}, {
content: 'Ship VIA',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
}, {
content: 'Terms',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
}, {
content: 'Writer',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
}, {
content: 'Trans Code',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
}, {
content: 'Acct#',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
}],
[{
content: invoiceCustOrderNo
}, {
content: invoiceShipVia
}, {
content: invoiceTerms
}, {
content: invoiceWriter
}, {
content: invoiceTransCode
}, {
content: invoiceAccountNo
}],
],
});
// Footer page numbers
doc.setFontSize(10);
// jsPDF 1.4+ uses getWidth, <1.4 uses .width
var pageSize = doc.internal.pageSize;
var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
doc.text(pageCount, data.settings.margin.left, pageHeight - 10);
// Left and Right Line
doc.setDrawColor(0, 0, 0);
doc.setLineWidth(0.2);
doc.line(14.1, 80, 14.1, 250);
doc.line(201.789, 80, 201.789, 250);
// Footer fine print
doc.autoTable({
styles: {
lineWidth: 0.2,
lineColor: 0,
fontSize: 6.5,
fillColor: false,
cellPadding: 0.8
},
alternateRowStyles: {
fillColor: false
},
bodyStyles: {
fillColor: false,
textColor: 0,
},
startY: pageHeight - 66.6,
body: [
[{
content: "Information Here.",
colSpan: 3
}],
]
});
// Footer details
doc.autoTable({
styles: {
lineWidth: 0.2,
lineColor: 0,
fontSize: 8,
fillColor: false
},
alternateRowStyles: {
fillColor: false
},
bodyStyles: {
fillColor: false,
textColor: 0,
},
startY: pageHeight - 57,
columnStyles: {
0: {
cellWidth: 130
},
1: {
cellWidth: 35
},
2: {
cellWidth: 22.68
},
},
body: [
[{
content: invoiceNote1 + "\n" + invoiceNote2 + "\n" + invoiceNote3 + "\n" + invoiceNote4 + "\n\n",
rowSpan: 4
},
{
content: ""
},
{
content: ""
}
],
[{
content: ""
}, {
content: ""
}],
[{
content: ""
}, {
content: ""
}],
[{
content: "Freight:",
styles: {
halign: 'right',
fontStyle: 'bold',
fillColor: [220, 220, 220]
}
}, {
content: invoiceFreight,
styles: {
halign: 'right'
}
}],
[{
content: "Signature __________________________________________________________________",
rowSpan: 2,
styles: {
valign: 'bottom'
}
}, {
content: "Tax:",
styles: {
halign: 'right',
fontStyle: 'bold',
fillColor: [220, 220, 220]
}
}, {
content: invoiceSalesTax,
styles: {
halign: 'right'
}
}],
[{
content: "Pay this Amount:",
styles: {
halign: 'right',
fontStyle: 'bold',
fillColor: [220, 220, 220]
}
}, {
content: invoiceTotal,
styles: {
halign: 'right'
}
}]
]
});
},
styles: {
lineWidth: 0.2,
lineColor: 0,
fontSize: 8,
showHead: 'everyPage',
overflow: 'ellipsize'
},
headStyles: {
fillColor: false,
textColor: 0
},
margin: {
top: 77.4,
bottom: 62
},
head: [
[{
dataKey: 'seq',
content: 'Seq.',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
},
{
dataKey: 'ord',
content: 'Ord',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
},
{
dataKey: 'shp',
content: 'Shp',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
},
{
dataKey: 'boq',
content: 'BO',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
},
{
dataKey: 'line',
content: 'Line',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
},
{
dataKey: 'partnumber',
content: 'Part Number',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
},
{
dataKey: 'description',
content: 'Description',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
},
{
dataKey: 'um',
content: 'UM',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
},
{
dataKey: 'list',
content: 'List',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
},
{
dataKey: 'cost',
content: 'Cost',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
},
{
dataKey: 'extcost',
content: 'Ext. Cost',
styles: {
fontStyle: 'bold',
halign: 'center',
fillColor: [220, 220, 220]
}
}
]
],
body: bodyRows(invoiceData)
});
function bodyRows(invoiceData) {
let body = [];
var pdfOrderDetails = invoiceData.OrderLines.OrderLine;
pdfOrderDetails.forEach(obj => {
body.push({
0: obj.LineNo,
1: obj.QtyOrd,
2: obj.QtyShip,
3: obj.QtyBO,
4: obj.LineCode,
5: obj.PartNo,
6: obj.Description,
7: obj.UOM,
8: {
content: "-",
styles: {
halign: 'right'
}
},
9: {
content: obj.EachPrice,
styles: {
halign: 'right'
}
},
10: {
content: obj.ExtPrice,
styles: {
halign: 'right'
}
}
});
});
return body;
}
// Total page number plugin only available in jspdf v1.0+
if (typeof doc.putTotalPages === 'function') {
doc.putTotalPages(totalPagesExp);
}
var fullPathOut = './data/out/' + invoiceOrderNo + '.pdf';
doc.save(fullPathOut);
}
1 answers
solution1
0 2022-08-02 07:04:47
Before: var pageCount = doc.internal.getNumberOfPages() Now (jspdf-autotable": "^3.5.25"): var pageCount = data. pageCount var currentPage= data. pageNumber ;
your code has to be like this:
didDrawPage: function (data) {
var pageCount = data.pageCount
// Total page number plugin only available in jspdf v1.0+
if (typeof doc.putTotalPages === 'function') {
pageCount = "Page " + data.pageNumber + " of " + pageCount ;
}
hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Rowspan issue in jsPDF-AutoTable
jsPDF-AutoTable " doc.autoTable is not a function"
Rearrange JSON object to show in jspdf-autotable
Download pdf file using jspdf-autotable
jsPDF/jsPDF-autotable print dom elements into tables
JsPDF, jsPDF-AutoTable wrapping row texts needed with overflow hidden
Excluding extra pages appeared while converting data-table to pdf using jsPDF-AutoTable plugin
How to customize header cell in PDF using jsPDF-AutoTable plugin?
How to print four Different Tables using jspdf-autotable
How do I use themes with jsPDF-AutoTable?
Related Tags