如何使用jQuery print方法在打印PDF或网页时添加页码？

我来帮你搞定这两个问题——不管是网页打印时指定位置加页码，还是打印生成PDF时的页码处理，核心其实都是结合CSS和jQuery Print的配置来实现，毕竟jQuery Print本质上是调用浏览器的打印功能，很多细节得靠样式来控制。

一、网页打印时在指定位置添加页码 #

你之前尝试失败，大概率是没利用好打印专用的CSS媒体查询，jQuery Print本身只是触发打印动作，页码的渲染得靠CSS计数器来实现。步骤如下：

1. 在页面指定位置添加页码容器
   先在你想显示页码的地方（比如页脚、侧边）放一个空元素：

   <div class="custom-page-number"></div>
   

2. 编写打印专用的CSS规则
   用@media print来定义打印时的样式，借助CSS计数器实现页码：

   /* 重置并递增页码计数器 */
   @media print {
     @page {
       counter-reset: page 1; /* 从第1页开始计数 */
       margin-bottom: 2cm; /* 给页脚留空间，避免页码被截断 */
     }
   
     /* 让页码显示在指定位置 */
     .custom-page-number::after {
       content: "第 " counter(page) " 页，共 " counter(pages) " 页";
       position: fixed;
       bottom: 15px;
       right: 20px;
       font-size: 14px;
       color: #666;
     }
   
     /* 屏幕上隐藏页码，只在打印时显示 */
     .custom-page-number {
       display: none;
     }
   
     @media print {
       .custom-page-number {
         display: block;
       }
     }
   }
   

3. 配置jQuery Print确保样式生效
   调用jQuery Print时，要确保加载全局样式，并且包含页码容器：

   $("#print-btn").click(function() {
     $("body").print({
       globalStyles: true, // 加载页面的全局样式（包括我们写的打印CSS）
       printContainer: true, // 打印整个容器，确保页码元素被包含
       title: "我的打印文档" // 可选：设置打印标题
     });
   });
   

常见坑点：如果还是不显示，检查一下是不是页码元素被display: none覆盖了，或者@page的边距设置太小导致页码被挤出打印区域。

二、打印生成PDF时添加页码 #

这里分两种情况：

情况1：将网页直接打印为PDF #

这种情况和上面的网页打印完全一样！浏览器的"保存为PDF"功能会遵循@media print的样式规则，只要你配置好上面的CSS计数器，生成的PDF里就会自动带有页码。

情况2：打印外部PDF文件（先渲染到网页再打印） #

如果是要打印已有的PDF文件，jQuery Print没法直接操作PDF内容，得先把PDF渲染到网页中，再手动添加页码，最后调用打印：

1. 用PDF.js渲染PDF到网页（需要引入PDF.js库）

   // 加载PDF文件
   pdfjsLib.getDocument("your-file.pdf").promise.then(function(pdf) {
     const totalPages = pdf.numPages;
     // 遍历每一页渲染
     for (let pageNum = 1; pageNum <= totalPages; pageNum++) {
       pdf.getPage(pageNum).then(function(page) {
         const canvas = document.createElement("canvas");
         const ctx = canvas.getContext("2d");
         const viewport = page.getViewport({ scale: 1.2 });
         canvas.width = viewport.width;
         canvas.height = viewport.height;
   
         // 渲染PDF页面到canvas
         page.render({ canvasContext: ctx, viewport: viewport }).promise.then(function() {
           // 创建页码元素
           const pageNumberEl = document.createElement("div");
           pageNumberEl.className = "pdf-page-num";
           pageNumberEl.textContent = `第 ${pageNum} 页 / 共 ${totalPages} 页`;
           
           // 把canvas和页码放到容器里
           const pageContainer = document.createElement("div");
           pageContainer.appendChild(canvas);
           pageContainer.appendChild(pageNumberEl);
           $("#pdf-render-container").append(pageContainer);
         });
       });
     }
   
     // 渲染完成后绑定打印按钮
     $("#print-pdf-btn").click(function() {
       $("#pdf-render-container").print({
         globalStyles: true,
         printContainer: true
       });
     });
   });
   

2. 添加打印样式确保分页和页码位置

   @media print {
     .pdf-page-num {
       text-align: right;
       margin: 10px 0;
       font-size: 14px;
     }
     /* 确保每一页PDF在打印时自动分页 */
     #pdf-render-container > div {
       page-break-after: always;
     }
     #pdf-render-container > div:last-child {
       page-break-after: avoid;
     }
   }
   

这样处理后，打印生成的PDF就会带有你自定义的页码了。

内容的提问来源于stack exchange，提问作者saket singh