前端小白-学习中 2023-03-08 08:57 采纳率: 0%
浏览 254

window.print打印设置页脚页码

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()方法打印页面时,就可以在每一页的页脚中显示页码信息了。

    展开全部

    评论
  • CSDN-Ada助手 CSDN-AI 官方账号 2023-03-08 11:30
    关注
    评论
  • 思念里住着风 2024-10-29 08:49
    关注

    这个问题解决了吗?

    评论
编辑
预览

报告相同问题?

问题事件

  • 创建了问题 3月8日

悬赏问题

  • ¥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 个割草电机),其次可以与树莓派主板相连电机照片如下:
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部