HTML打印每一页都有固定的头部

最新推荐文章于 2022-12-23 14:57:00 发布

sakuraxiaoyu

最新推荐文章于 2022-12-23 14:57:00 发布

阅读量1.1k

点赞数 1

分类专栏： web前端文章标签： html js 前端

本文链接：https://blog.csdn.net/qq_40830369/article/details/120544251

版权

web前端专栏收录该内容

78 篇文章 2 订阅

订阅专栏

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 += `    填写说明： &nbsp *为必填项目，其余根据公司需求填写`
                    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)]

sakuraxiaoyu

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
HTML打印每一页都有固定的头部

HTML打印每一页都有固定的头部业务需求是这样的，在对这个表格进行打印的时候，考虑到这个表格会有很多行，万一超过了这一页希望保留左上角的公司logo和右上角的公司名称等信息，但是表格上面的“客户名称”等相关信息就不需要了。解决这个问题有从这几个角度出发，这有点类似页眉和页脚的设置。给整个页面设置页边距。但是这个实际上会把整个的边距减小以至于挤掉本来左上角和右上角的logo位置。 @page{ //这个margin根据实际去调整。 margin: 20
复制链接

扫一扫

专栏目录