如何通过JavaScript强制指定打印设置 忽略用户打印机默认配置

解决方案 #

要实现打印参数强制配置，核心是在打印iframe的头部注入打印专用CSS规则，通过@page语法覆盖浏览器默认打印配置，无需用户手动调整打印机设置即可达到预期效果。

效果对比 #

• 默认设置下的非预期效果：
  
• 目标打印效果：
  

完整修改后代码 #

$(function() {
    $.fn.printContent = function() {
      var target = $(this);
      var title;
      if (target.attr("title") != undefined) {
        title = target.attr("title");
      } else {
        title = "Element Content"
      }
      var uid = Date.now();
      var printFrame = $("<iframe>", {
        id: "printFrame_" + uid,
        name: "printFrame_" + uid
      }).css({
        position: "absolute",
        top: "-1000000px"
      }).appendTo($("body"));
      var frameHTML = $("<html>");
      var head = $("<head>").appendTo(frameHTML);
      $("<title>").html(title).appendTo(head);
      // 新增打印专用样式配置
      const printStyle = `
      @media print {
        * {
          print-color-adjust: exact;
          -webkit-print-color-adjust: exact;
        }
        @page {
          /* 强制纸张尺寸：A4纵向，要其他尺寸可改为Letter、A3等，加landscape为横向 */
          size: A4 portrait;
          /* 强制纸张四边预留边距：上下20mm，左右15mm，按需调整 */
          margin: 20mm 15mm;
          
          /* 自定义页眉配置，完全替代浏览器默认页眉 */
          @top-center {
            content: "${title}";
            font-size: 14px;
            font-weight: bold;
          }
          /* 自定义页脚配置，完全替代浏览器默认页脚 */
          @bottom-center {
            content: "第 " counter(page) " 页，共 " counter(pages) " 页";
            font-size: 12px;
          }
        }
        body {
          margin: 0;
          padding: 0;
        }
      }
      `;
      $("<style>").html(printStyle).appendTo(head);
      var body = $("<body>").appendTo(frameHTML);
      if ($("body > link").length == 1) {
        $("body > link").clone().appendTo(body);
      }
      body.append(target.html());
      var winFrame = window.frames['printFrame_' + uid];
      winFrame.document.open();
      winFrame.document.write(frameHTML.prop("outerHTML"));
      winFrame.document.close();
      setTimeout(function() {
        printFrame.focus();
        winFrame.print();
        printFrame.remove();
      }, 100);
    };
  
    $("#btnPrint").click(function() {
      $("#content").printContent();
    });
  });

配置说明 #

• 纸张尺寸调整：修改size: A4 portrait;参数，例如size: Letter landscape;代表横向Letter纸
• 边距调整：修改margin: 20mm 15mm;参数，四个值依次为上、右、下、左边距
• 页眉页脚内容调整：修改@top-center、@bottom-center下的content属性值，支持插入动态变量、固定文本
• 如需完全隐藏浏览器自带的页眉页脚，无需用户手动取消勾选，只需删除自定义页眉页脚配置、把@page的margin设为0，再给打印内容外层元素加对应内边距即可，浏览器默认页眉页脚会被挤出打印区域自动隐藏

兼容说明 #

上述配置在Chrome 86+、Edge 86+、Firefox 108+版本上完全生效，Safari浏览器对@page自定义页眉页脚的支持度有限，其余纸张、边距配置可正常生效。

内容的提问来源于stack exchange，提问作者Ritankar Bhattacharjee