这是我动态生成的html：
<body>
<div class="page-break page" data-div="0" id="printDiv_0">...long content here...</div>
<div class="page-break page" data-div="1" id="printDiv_1">...long content here..</div>
</body>
现在，在打印时，我有一个工作代码JS代码，除了，当一个div有多个页面时，它只将prependingHeader添加到第一页，后续页面是空的：
const testx = () => {
const docs = document.querySelectorAll('.page-break');
const createHeader = (leftText, rightText) => {
const header = document.createElement('div');
header.style.display = 'flex';
header.style.justifyContent = 'space-between';
header.style.paddingRight = '10px';
header.style.paddingLeft = '10px';
header.style.alignItems = 'center';
header.style.marginBottom = '0px';
header.style.fontWeight = 'bold';
header.style.fontSize = '15px';
header.classList.add("font-weight-bold");
header.classList.add("print-header-div");
// Left column
const leftDiv = document.createElement('div');
leftDiv.textContent = leftText;
// Right column
const rightDiv = document.createElement('div');
rightDiv.textContent = rightText;
header.appendChild(leftDiv);
header.appendChild(rightDiv);
return header;
};
docs.forEach((div, index) => {
// Safely retrieve elements and fallback to defaults if missing
const sectionId = div.getAttribute('data-div') || `Section ${index + 1}`;
const requestCode = div.querySelector('#RequestCode')?.value || 'Unknown Request Code';
const lastName = div.querySelector('.print-last-name')?.innerHTML || 'Unknown Last Name';
const firstName = div.querySelector('.print-first-name')?.innerHTML || 'Unknown First Name';
const dob = div.querySelector('.print-dob')?.innerHTML || 'Unknown DOB';
// Generate the eOrderIdentity
const eOrderIdentity = `${requestCode} ${lastName} ${firstName} ${dob}`;
// Get total pages for the current div (assuming it has content that spans multiple pages)
const totalPages = calculatePageCount(div)
const currentPage = 1; // For single div context, always start at 1
// Create and prepend a header for the current page
const prependedHeader = createHeader(
`${eOrderIdentity}`,
`Page ${currentPage} of ${totalPages}`
);
div.insertBefore(prependedHeader, div.firstChild);
});
// Trigger the print dialog
window.print();
};
// Letter size by default
function calculatePageCount(content, pageHeight = 1056, pageWidth = 216) {
let contentElement;
if (typeof content === 'string') {
contentElement = document.createElement('div');
contentElement.innerHTML = content;
} else if (content instanceof HTMLElement) {
contentElement = content.cloneNode(true);
} else {
throw new Error('Invalid content. It must be an HTML string or a DOM element.');
}
contentElement.style.cssText = `
visibility: hidden;
position: absolute;
width: ${pageWidth}mm;
top: -9999px;
`;
document.body.appendChild(contentElement);
const contentHeight = contentElement.scrollHeight;
const totalPages = Math.ceil(contentHeight / pageHeight);
//document.body.removeChild(contentElement);
return totalPages;
}
每个 div
prependedHeader例如：
第 1 个 div 有 3 页，每页的页眉将为第 1 页（共 3 页）、第 2 页（共 3 页）、第 3 页（共 3 页）。
第 2 个 div 有 2 页，每页的页眉将为第 1 页（共 2 页）、第 2 页（共 2 页）。
1 个分页 div 相同。
当调用
window.print()如果我明白你在寻找什么。 循环内有 const currentPage，因此每页都只有 1。
将其添加到循环上方。
let currentPage = 1;
然后将其放入循环中
currentPage++;
应该工作得更好。