HTML2pdf settings and options for header and footer

I use Vue JS in my app. I have a table content to print aand i use HTML2pdf. I can add there header and footer, pagination etc. The question is - table content is dynamic and the length of the table, as well as number of columns depends on the users filters. It breaks auto, so I cannot split the table manually in my html. The goal is to add table header to each of the page. I can get table headers using DOM dynamically (number cols and names depends on user choise) and add it to my header. But it displays just like a string. Every col name from header does not match col content. My table cols have fixed equal size, so I suppose, if I can stretch this header string to max width, visually it will match.

Question: How to stretch the header string to the full width of pdf page? Could be nice to style and add borders. Or there is more efficient way do get table header on each page?
ps. Table style itself is custom styled with grid cols, not table class with th/td if it matters.

Here is my code:

const tableHeader = computed(() => {
let headerCollection = document.getElementById('header-pdf')
?.children as HTMLCollection
let arr = []
for (let i = 0; i < headerCollection.length; i++) {
arr.push(headerCollection[i].innerHTML)
}
var headerString = arr.toString().replace(/\,/g, ' | ').toUpperCase()
return headerString
})
export const exportToPDF = (elementId: string, orientation: string) => {
var element = document.getElementById(elementId)
var opt = {
filename: fileName.value,
margin: [15, 2, 15, 6],
pagebreak: { mode: 'css' },
jsPDF: { format: 'a4', orientation: orientation, putTotalPages: true }
}
html2pdf().set(opt).from(element).toPdf().get('pdf')
.then((pdf: any) => {
var totalPages = pdf.internal.getNumberOfPages();
var pageHeight = pdf.internal.pageSize.height || pdf.internal.pageSize.getHeight();
var pageWidth = pdf.internal.pageSize.width || pdf.internal.pageSize.getWidth();
var footerText = '';
var i;
for (i = 1; i <= totalPages; i++) {
if (i > 1) {
pdf.setPage(i);
pdf.setFontSize(8);
pdf.setTextColor(150);
pdf.text('page ' + i + ' of ' + totalPages + '\n' + footerText , pageWidth / 2, 
pageHeight - 5, {align: 'center'});
pdf.setFontSize(12);
pdf.text(tableHeader .value , pageWidth / 2, 10, {align: 'center'});
}
}}).save()

The main problem is that your header string is being centered as a whole rather than with each column header being centered over its associated column because it is being treated as a single entity.

One solution to this problem is to figure out where each header should be placed based on the number of columns and their widths. These positions can then be used to put each heading immediately over its corresponding column.

Here is a revised version of your code where the header is correctly divided into its component parts:

const tableHeader = computed(() => {
let headerCollection = document.getElementById('header-pdf')?.children as HTMLCollection;
let arr = [];
for (let i = 0; i < headerCollection.length; i++) {
arr.push(headerCollection[i].innerHTML);
}
return arr.map(e => e.toUpperCase());
})
export const exportToPDF = (elementId: string, orientation: string) => {
var element = document.getElementById(elementId);
var opt = {
filename: fileName.value,
margin: [15, 2, 15, 6],
pagebreak: { mode: 'css' },
jsPDF: { format: 'a4', orientation: orientation, putTotalPages: true }
}
html2pdf().set(opt).from(element).toPdf().get('pdf').then((pdf: any) => {
var totalPages = pdf.internal.getNumberOfPages();
var pageHeight = pdf.internal.pageSize.height || pdf.internal.pageSize.getHeight();
var pageWidth = pdf.internal.pageSize.width || pdf.internal.pageSize.getWidth();
var footerText = '';
var i;
var colWidth = pageWidth / tableHeader.value.length; // Divide total width by number of headers
var headers = tableHeader.value;
for (i = 1; i <= totalPages; i++) {
if (i > 1) {
pdf.setPage(i);
pdf.setFontSize(8);
pdf.setTextColor(150);
pdf.text('page ' + i + ' of ' + totalPages + '\n' + footerText , pageWidth / 2, pageHeight - 5, {align: 'center'});
pdf.setFontSize(12);
headers.forEach((text, index) => {
var position = (colWidth / 2) + (colWidth * index);
pdf.text(text, position, 10, {align: 'center'});
})
}
}
}).save();
}

Here, the main difference is that we preserve the headers as an array and position each one separately using the forEach function rather than converting them into a string. This code takes for granted that each column will have a width that is distributed evenly among its headers. After that, the headings are positioned in the middle of their corresponding columns.

It's a little more challenging to apply styles and borders because html2pdf uses the jsPDF package, which is typically used for text placement rather than sophisticated design. Using the line function, you might possibly construct lines to serve as borders, but it might not be feasible to add things like background color or other elaborate styles.

Please test this code in your environment to make sure it works.