window.print有什么方法实现页脚有页码还要求居中 显示:第几页/共几页,不需要装控件的那种,还不能写死,不用强制分页,要写个很多页面能通用的方法
翻了一圈没找到解决方法要疯啦
3条回答 默认 最新
- CQ.abc 2023-03-08 09:07关注
可以使用CSS中的@page规则来实现打印页脚,并结合JavaScript动态获取页码信息,实现动态显示页码和总页数。
具体实现方法如下:
在CSS样式表中添加@page规则:
@page { @bottom-center { content: "第 " counter(page) " 页 / 共 " counter(pages) " 页"; } }
这个@page规则将页脚内容设置为"第 X 页 / 共 Y 页",其中X为页码,Y为总页数,使用CSS中的counter()函数动态获取。
在HTML文件中引入CSS样式表:
<link rel="stylesheet" href="print.css" media="print">
这里将样式表应用于打印媒体类型。
在JavaScript文件中添加以下代码:
window.onload = function() { var pageCount = getNumberOfPages(); var footer = document.createElement("div"); footer.id = "page-footer"; footer.innerHTML = "第 <span id='page-number'></span> 页 / 共 " + pageCount + " 页"; document.body.appendChild(footer); updatePageNumber(); window.onbeforeprint = updatePageNumber; } function getNumberOfPages() { var totalHeight = document.body.clientHeight; var pageHeight = window.innerHeight; var pageCount = Math.ceil(totalHeight / pageHeight); return pageCount; } function updatePageNumber() { var pageNumber = getCurrentPageNumber(); var pageNumberSpan = document.getElementById("page-number"); pageNumberSpan.innerHTML = pageNumber; } function getCurrentPageNumber() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var pageHeight = window.innerHeight; var pageNumber = Math.ceil(scrollTop / pageHeight) + 1; return pageNumber; }
这个JavaScript代码实现了动态获取总页数和当前页码,并将页码信息显示在页脚中。具体实现方法如下:
getNumberOfPages()函数用于获取总页数,根据页面内容高度和浏览器窗口高度计算得出。
updatePageNumber()函数用于更新页码信息,将当前页码显示在页脚中。
getCurrentPageNumber()函数用于获取当前页码,根据页面滚动高度和浏览器窗口高度计算得出。
在CSS样式表中添加页脚样式:
#page-footer { position: fixed; bottom: 0; left: 0; right: 0; height: 30px; line-height: 30px; text-align: center; font-size: 12px; }
这个样式规则将页脚固定在页面底部,并设置样式。
最后,通过调用window.print()方法打印页面时,就可以在每一页的页脚中显示页码信息了。
解决 无用评论 打赏 举报
关注 解决 无用评论 打赏 举报- 思念里住着风 2024-10-29 08:49关注解决 无用评论 打赏 举报
悬赏问题
- ¥15 代写uni代码,app唤醒
- ¥15 全志t113i启动qt应用程序提示internal error
- ¥15 ensp可以看看嘛.
- ¥80 51单片机C语言代码解决单片机为AT89C52是清翔单片机
- ¥60 优博讯DT50高通安卓11系统刷完机自动进去fastboot模式
- ¥15 minist数字识别
- ¥15 在安装gym库的pygame时遇到问题,不知道如何解决
- ¥20 uniapp中的webview 使用的是本地的vue页面,在模拟器上显示无法打开
- ¥15 网上下载的3DMAX模型,不显示贴图怎么办
- ¥15 关于#stm32#的问题:寻找一块开发版,作为智能化割草机的控制模块和树莓派主板相连,要求:最低可控制 3 个电机(两个驱动电机,1 个割草电机),其次可以与树莓派主板相连电机照片如下: