HTML打印每一页都有固定的头部
业务需求是这样的，在对这个表格进行打印的时候，考虑到这个表格会有很多行，万一超过了这一页希望保留左上角的公司logo和右上角的公司名称等信息，但是表格上面的“客户名称”等相关信息就不需要了。
解决这个问题有从这几个角度出发，这有点类似页眉和页脚的设置。给整个页面设置页边距。但是这个实际上会把整个的边距减小以至于挤掉本来左上角和右上角的logo位置。
@page{
//这个margin根据实际去调整。
margin: 20px;
}
实际上也尝试了其他方法，但是目前来看以下这种是有效的。贴出部分有效的代码，因为我这边实际上是需要多页打印的，所以很多元素都是用``来进行拼接的。
在里面创建节点，等待后续被插上。
<body>
<div class="divBlank">
<div id='divHeader' class="divHeader"></div>
</div>
<div id="meg"></div>
</body>
下面这段代码实际上是写在里面的，因为我是从localStorage里面取到的JSON的数据，对每一条数据进行遍历再渲染出来，再次说明一下，以便造成误解。比较重要的代码在下面，这里只给个参考。不想看就直接跳过。
window.onload = function () {
const printdata = JSON.parse(sessionStorage.getItem('print'))
printdata.forEach((element,index) => {
switch (element.type) {
case "bank":
a = `<div style="width:1000px;height: 100%;margin: 20px auto;page-break-after: always;">`
a += ` <div class="header">`
a += ` <p>银行收款通知单</p>`
a += ` </div>`
a += ` <div class="title">`
a += ` <div style="width: 100%;">`
a += ` <div class="title-div">`
a += ` <p>付款单位：<span id='banksourceBankAccountName${index}'></span></p>`
a += ` <p>收款账号：<span id='banktargetBankAccount${index}'</span></p>`
a += ` </div>`
a += ` <div class="title-div">`
a += ` <p>收款金额：<span id='bankamount${index}'></span></p>`
a += ` <p>收款日期：<span id='bankcollectionDate${index}'></span></p>`
a += ` </div>`
a += ` <div class="title-div" style="width:89%">`
a += ` <p>收款内容：<span id='bankremark${index}'></span></p>`
a += ` <p>收款部门&填写人员：<span id='bankcollectionPerson${index}'></span></p>`
a += ` </div>`
a += ` <div style="margin-left:762px;margin-top:35px">`
// a += ` <p></p>`
a += ` <span>单位：元 <span/> <span style="margin-left:40px">币种: <span/> <span id='bankcurrency${index}'></span>`
a += ` </div>`
a += ` </div>`
a += ` </div>`
a += ` <table class="table table-bordered table-condensed border-dark" style='border:2px solid black;text-align:center'>`
a += ` <thead style="display:table-header-group">`
a += ` <tr style="height:150px;visibility:hidden">`
a += ` <th>`
a += ` </th>`
a += ` </tr>`
a += ` <tr class='bank_tr'>`
a += ` <th style='width:100px;vertical-align: middle;'>客户代码*</th>`
a += ` <th style='width:220px'>项目名称*</th>`
a += ` <th style='width:150px'>合同号*</th>`
a += ` <th style='width:150px'>WBS编号(制造令)*</th>`
a += ` <th style='width:100px'>收款金额*</th>`
a += ` <th style='width:90px'>款项分类*</th>`
a += ` <th style='width:100px'>销售订单号</th>`
a += ` <th style='width:100px'>备注</th>`
a += ` </tr>`
a += ` </thead>`
a += ` <tbody id="bankprinttable${index}">`
a += ` </tbody>`
a += ` </table>`
a += ` <div style="margin-top:-15px">`
a += ` <div style="font-size:14px"><span id='banksplitamount${index}' class="split_amount" style="margin-left:633px;display:initial"></span><span>你划分的金额正确</span></div>`
a += ` </div>`
a += ` <div style="margin-top:15px;font-weight:600">`
a += ` <p>项目资金管理员：</p>`
a += ` <p style="margin-top:20px;">项目处长：</p>`
a += ` </div>`
a += ` <div style="margin-top:45px">`
a += ` 填写说明：   *为必填项目，其余根据公司需求填写`
a += ` </div>`
a += `</div>`
var wrapper = document.createElement('div');
wrapper.innerHTML = a;
document.getElementById("meg").appendChild(wrapper.firstChild)
// 单独把表头拎出来
let divHeader = ''
divHeader += `
<img class="favicon" src="./icons/shanghaiElectric.png">
<div class='bankcompany_Name'>
<span id='bankcompanyName${index}'></span>
</div>
<div style="display: flex; justify-content: flex-end; margin-bottom: 20px;font-weight:600">
凭证号：<span id='bankvoucherNumber${index}'></span>
</div>
<div style="display: flex; justify-content: flex-end; margin-bottom: 20px;font-weight:600"">
ID：<span id='bankNoticeId${index}'></span>
</div>
`
document.getElementById('divHeader').innerHTML = divHeader
break;
}
});
setTimeout(() => {
const printdata = JSON.parse(sessionStorage.getItem('print'))
printdata.forEach((element,index)=>{
switch (element.type) {
case "bank":
let bankNoticeId = document.getElementById(`bankNoticeId${index}`)
bankNoticeId.innerHTML = printdata[index]?.bankStatementClaimNotice.id
let bankvoucherNumber = document.getElementById(`bankvoucherNumber${index}`)
bankvoucherNumber.innerHTML = printdata[index]?.voucherNumber
let bankcompanyName = document.getElementById(`bankcompanyName${index}`)
bankcompanyName.innerHTML = printdata[index]?.companyName
let banksourceBankAccountName = document.getElementById(`banksourceBankAccountName${index}`)
banksourceBankAccountName.innerHTML = printdata[index]?.bankStatementClaimNotice.targetBankAccountName
let banktargetBankAccount = document.getElementById(`banktargetBankAccount${index}`)
banktargetBankAccount.innerHTML = printdata[index]?.bankStatementClaimNotice.sourceBankAccount
let bankamount = document.getElementById(`bankamount${index}`)
bankamount.innerHTML = printdata[index]?.bankStatementClaimNotice.amount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
let bankcollectionDate = document.getElementById(`bankcollectionDate${index}`)
bankcollectionDate.innerHTML = printdata[index]?.bankStatementClaimNotice.collectionDate.split('T')[0]
let bankremark = document.getElementById(`bankremark${index}`)
bankremark.innerHTML = printdata[index]?.bankStatementClaimNotice.remark
let bankcollectionPerson = document.getElementById(`bankcollectionPerson${index}`)
bankcollectionPerson.innerHTML = printdata[index]?.bankStatementClaimNotice.collectionPerson
let bankcurrency = document.getElementById(`bankcurrency${index}`)
bankcurrency.innerHTML = printdata[index]?.bankStatementClaimNotice.currency=='CNY'?'人民币':'美元'
let bankprinttable = document.getElementById(`bankprinttable${index}`)
let banksplitamount = document.getElementById(`banksplitamount${index}`)
let bankhtmlstr = ''
let banktotalmoney = 0
printdata[index].bankStatementClaimNotice.items.map((item, index) => {
for (let index = 0; index < 50; index++) {
bankhtmlstr = bankhtmlstr +
`<tr class="second_table">
<td>${item.customerNumber}</td>
<td>${item.projectName}</td>
<td>${item.contractNumber}</td>
<td>${item.wbsNumber}</td>
<td>${item.collectionAmount?item.collectionAmount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ','):''})</td>
<td>${item.fundsCategory}</td>
<td>${item.salesOrderNumber}</td>`
if (item.createdInSystem) {
bankhtmlstr +=
`<td>${item.notes ? item.notes : ''}</td>
</tr>`
}
else {
bankhtmlstr +=
`<td>${item.notes ? item.notes : ''}</td>
</tr>`
}
}
banktotalmoney = banktotalmoney + parseFloat(item.collectionAmount)
})
bankprinttable.innerHTML = bankhtmlstr
banksplitamount.innerHTML = banktotalmoney.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
break;
}
})
window.print()
}, 2000)
}
这里我只贴出比较重要的几个样式。再此做些说明。首先我们用到了position: fixed;这个属性。这个属性可以把你的div相对于其他的盒子独立出来，只和窗口的相对视图有关系。也就是说这样就算你换页了，这两个东西还是在页面的左上角和右上角。但是会暴露一个问题就是，因为不受其他盒子影响，它会和其他元素重叠。这显然并不是我们想要的。
.divHeader {
//width要设置为100%，不然元素不会分开到两边。
width: 100%;
display: block;
//实际上是每页头部的高度，这个根据实际需要自己调整。
height: 150px;
position: fixed;
}
.divBlank{
height: 150px;
width: 100%;
}
但是会暴露一个问题就是，因为不受其他盒子影响，它会和其他元素重叠。这显然并不是我们想要的。
在这里的解决办法是新建一个,在这个里面加上一个空的表头元素,给他加上一个固定的高度，再把这个空的给隐藏起来，就可以了。
<tr style="height:150px;visibility:hidden">
<th>
</th>
</tr>
最后效果是这样的。
th>,给他加上一个固定的高度，再把这个空的给隐藏起来，就可以了。
<tr style="height:150px;visibility:hidden">
<th>
</th>
</tr>
最后效果是这样的。
[外链图片转存中…(img-HKgYmCcv-1632883767204)]
752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
