I've been tackling a challenge in my Vue.js application, specifically with generating invoices and accurately numbering the pages. An issue arose when printing the invoice – each page was labeled "Page 1 of 20" irrespective of its actual position in the document. This inconsistency has left me perplexed, and I'm struggling to find a resolution. Any suggestions or troubleshooting insights would be greatly welcomed. Below is the problematic code snippet:
<template>
<div style="background-color: lightgray" >
<div style="background-color: white;margin: auto;width: 29.7cm" id="printable-content">
<!-- Invoice content goes here -->
</div>
</div>
<div class="invoice">
<!-- Invoice content continues here -->
<!-- Page number -->
<span class="page-number"> <span class="page-counter"></span></span>
</div>
</template>
<script>
export default {
data() {
return {
pageNumber: 1, // Initial page number
items: [
{name: "Item 1", quantity: 2, price: 10, vat: 20, price_in: 1200, totalt: 2000},
{name: "Item 2 with a long name that needs to be truncated", quantity: 1, price: 20},
{name: "Item 3", quantity: 3, price: 15},
<!-- More item objects -->
]
};
},
methods: {
limitNameLength(name) {
const maxLength = 20;
return name.length > maxLength ? name.substring(0, maxLength) + '...' : name;
},
updatePageCounter(totalPages) {
const currentPage = this.pageNumber;
this.$nextTick(() => {
const pageCounterElement = document.querySelector('.page-counter');
if (pageCounterElement) {
document.querySelector('.page-counter').textContent = currentPage;
pageCounterElement.textContent = `Page ${currentPage} of ${totalPages}`;
}
});
},
},
mounted() {
const totalPages = 20;
this.updatePageCounter(totalPages);
},
};
</script>
<style lang="scss">
thead td, tfoot td {
padding: 20px;
}
tbody tr td {
padding: 5px 20px;
}
.rejectBreak {
page-break-after: always;
}
@media print {
.page-footer {
position: fixed;
bottom: 0;
right: 0;
left: 0;
padding: 10px;
background-color: white;
border-top: 1px solid lightgray;
text-align: right;
}
tfoot {
display: table-footer-group;
}
button {
display: none;
}
body {
margin: 0;
}
tfoot .tfootHolder {
display: none;
}
.tfoot {
display: block !important;
padding: 20px;
position: fixed;
bottom: 0;
width: 29.7cm;
}
.page-footer-space {
height: 300px;
}
@page {
size: A4;
}
<!-- Additional print styles -->
</style>
Despite extensive Vue.js coding, the page counting functionality remains faulty.