使用自定义jQuery打印方法时如何隐藏不需要打印的div元素

你自定义打印逻辑失效的核心原因是：你声明的@media print规则写在父页面样式中，而你创建的printIframe是独立的浏览器文档上下文，默认不会继承父页面的任何样式规则。右键触发原生打印时是对整个父页面文档生效，所以样式正常；调用iframe打印时仅作用于iframe内的文档，自然无法匹配到父页面的.no-print隐藏规则。

直接在生成iframe内容时，将打印相关的样式规则注入到iframe的文档头部即可，以下是适配你现有jQuery扩展逻辑的修改方案：

核心逻辑修改 #

你原来往iframe写入内容的部分，需要额外追加样式注入逻辑，参考代码如下：

$.fn.extend({
  customPrint: function() {
    // 原有逻辑：创建隐藏iframe
    const printIframe = $('<iframe>', {
      name: 'printIframe',
      css: { position: 'absolute', width: 0, height: 0, left: '-9999px', top: '-9999px' }
    }).appendTo('body')[0];
    const iframeDoc = printIframe.contentDocument || printIframe.contentWindow.document;
    
    // 原有逻辑：获取目标容器内容
    const targetContent = $(this).html();

    // 新增：注入打印样式到iframe头部
    iframeDoc.open();
    iframeDoc.write(`
      <html>
        <head>
          <style>
            @media print {
              .no-print {
                display: none !important;
              }
              /* 可在此追加其他打印需要的样式，比如页面边距、字体大小等 */
              @page {
                margin: 1cm;
              }
            }
          </style>
        </head>
        <body>${targetContent}</body>
      </html>
    `);
    iframeDoc.close();

    // 原有打印触发逻辑，等待iframe加载完成后调用打印
    printIframe.contentWindow.focus();
    printIframe.contentWindow.onload = function() {
      printIframe.contentWindow.print();
      // 打印完成后移除iframe，避免残留
      setTimeout(() => $(printIframe).remove(), 100);
    };
    return this;
  }
});

调用方式 #

原有打印按钮绑定逻辑不需要修改，还是通过传入动态ID调用即可，示例如下：

$('#printBtn').click(function() {
  $('#yourDynamicDivId').customPrint();
});

• 如果你的目标容器本身有很多自定义样式需要在打印时保留，也可以把父页面引入的CSS链接也写入到iframe的head中，确保打印样式和父页面显示一致
• 注入样式时建议给.no-print的display: none加上!important，避免被容器内的其他行内样式覆盖

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