如何打印使用Tailwind CSS样式的网页区块

我有一个包含需打印报表的网页区块，该报表内容较长且使用Tailwind CSS进行样式设置。以下是我的tailwind.config文件及打印该区块的方法，恳请提供帮助，提前感谢。

当前配置与打印代码 #

Tailwind配置文件 #

module.exports = {
  content: ["./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      screens: {
        print: {
          raw: 'print'
        },
        screen: {
          raw: 'screen'
        }
      }
    },
  },
  plugins: [],
}

打印函数 #

printReport() {
  let prtContent = document.getElementById("report");
  let WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
  WinPrint.document.write(prtContent.innerHTML);
  WinPrint.document.close();
  WinPrint.focus();
  WinPrint.print();
  WinPrint.close();
},

核心问题与修复方案 #

1. 样式缺失问题 #

当前打印方法仅复制报表HTML内容，未导入Tailwind CSS样式，导致打印预览样式错乱。需将页面样式资源注入新窗口。

2. 长报表分页优化 #

长报表需合理分页避免内容截断，可设置每页重复表头、调整页边距。

修改后的打印函数 #

function printReport() {
  const prtContent = document.getElementById("report");
  const WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
  
  // 收集当前页面所有样式表（含Tailwind）
  const styleElements = document.querySelectorAll('link[rel="stylesheet"], style');
  let styleHtml = '';
  styleElements.forEach(el => styleHtml += el.outerHTML);
  
  // 构建完整HTML文档，注入样式和自定义打印规则
  WinPrint.document.write(`
    <!DOCTYPE html>
    <html>
      <head>
        ${styleHtml}
        <style>
          /* 全局打印页设置 */
          @page {
            size: A4;
            margin: 1cm;
          }
          /* 表格跨页时重复表头 */
          thead {
            display: table-header-group;
          }
          /* 强制分页类 */
          .print-break {
            page-break-after: always;
          }
        </style>
      </head>
      <body>
        ${prtContent.innerHTML}
      </body>
    </html>
  `);
  
  WinPrint.document.close();
  WinPrint.focus();
  
  // 延迟打印确保样式加载完成
  setTimeout(() => {
    WinPrint.print();
    WinPrint.close();
  }, 500);
}

增强Tailwind打印样式支持 #

在tailwind.config中扩展打印专属实用类，方便直接在HTML中控制打印行为：

module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      screens: {
        print: { raw: 'print' },
        screen: { raw: 'screen' }
      },
      // 扩展打印分页相关类
      utilities: {
        'page-break-after': {
          'page-break-after': 'always',
        },
        'page-break-before': {
          'page-break-before': 'always',
        },
        'page-break-inside-avoid': {
          'page-break-inside': 'avoid',
        }
      }
    },
  },
  plugins: [],
}

实际使用示例 #

• 隐藏屏幕显示但无需打印的元素：<div class="screen:block print:hidden">仅屏幕显示</div>
• 在报表分段处强制分页：<div class="print-break"></div>
• 避免表格行被跨页截断：<tr class="print:page-break-inside-avoid">...</tr>

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