使用CSS @media print实现横向双栏单页打印及空白页问题排查求助（React/NextJS站点）

我来帮你搞定这两个打印难题，咱们一步步拆解解决：

一、解决空白页问题 #

你当前的CSS用了visibility: hidden来隐藏非打印内容，但这个属性只是让元素不可见，元素仍然会占据文档流空间，这就是前后出现空白页的核心原因。咱们换个思路，彻底移除非打印内容的布局空间：

1. 把非.printarea的元素直接设为display: none，而不是visibility: hidden
2. 重置body的默认margin和padding，避免浏览器默认样式占空间
3. 给@page设置合适的边距，消除默认页面边距导致的空白

二、实现横向打印+单页两份日程表 #

已经设置了@page { size: landscape; }，但还需要让两份日程表在横向页面里并排布局，同时确保内容不会溢出分页：

1. 用Flex/Grid布局让.printarea内部的两份日程表各占一半宽度
2. 限制打印区域的高度，确保内容在单页内
3. 用page-break-inside: avoid防止日程表被分页拆分
4. 如果页面原本只有一份日程表，需要在打印时动态渲染第二份（可以用JS监听打印事件）

修改后的完整CSS代码 #

@media print {
  /* 彻底移除所有非打印区域的布局空间，解决空白页 */
  body > *:not(.printarea) {
    display: none !important;
  }
  /* 重置body默认边距，避免额外空白 */
  body {
    margin: 0;
    padding: 0;
    font-size: 12px; /* 可根据传单大小调整字体 */
  }
  /* 隐藏不需要打印的元素 */
  .noprint {
    display: none !important;
  }
  /* 强制横向打印，设置合适的页面边距 */
  @page {
    size: landscape;
    margin: 1cm; /* 可根据传单需求调整，比如0.5cm */
  }
  /* 打印区域使用Flex布局，放置两份日程表 */
  .printarea {
    display: flex;
    gap: 1.5rem; /* 两份日程表之间的间距 */
    width: 100%;
    height: 90vh; /* 适配打印页面高度，避免溢出分页 */
    page-break-inside: avoid; /* 防止内容被拆分到两页 */
  }
  /* 每份日程表占一半宽度，内部自适应布局 */
  .printarea .schedule-container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  /* 确保内部元素不会溢出，适配打印宽度 */
  .printarea * {
    max-width: 100%;
    visibility: visible;
  }
}

动态渲染第二份日程表（React/NextJS实现） #

如果你的页面原本只有一份日程表，需要在打印时自动复制一份，可通过监听浏览器的打印事件实现：

import { useState, useEffect } from 'react';

export default function YogaSchedule() {
  const [isPrinting, setIsPrinting] = useState(false);

  useEffect(() => {
    // 监听打印前后事件
    const handleBeforePrint = () => setIsPrinting(true);
    const handleAfterPrint = () => setIsPrinting(false);

    window.addEventListener('beforeprint', handleBeforePrint);
    window.addEventListener('afterprint', handleAfterPrint);

    return () => {
      // 清理事件监听
      window.removeEventListener('beforeprint', handleBeforePrint);
      window.removeEventListener('afterprint', handleAfterPrint);
    };
  }, []);

  // 提取日程表内容为单独组件/片段
  const renderSchedule = () => (
    <div className="schedule-container">
      {/* 这里放你的日程表内容，比如课程列表、标题等 */}
      <h2>Yoga Schedule</h2>
      {/* ...其他日程表元素 */}
    </div>
  );

  return (
    <div className="page-content">
      {/* 页面其他非打印内容，比如导航、footer等，会被print媒体查询隐藏 */}
      <div className="noprint">
        {/* 导航栏、返回按钮等 */}
      </div>

      <div className="printarea">
        {renderSchedule()}
        {/* 打印时渲染第二份日程表 */}
        {isPrinting && renderSchedule()}
      </div>
    </div>
  );
}

额外注意事项 #

• 测试打印时，用浏览器的“打印预览”功能实时调整样式，避免反复打印浪费纸张
• 如果日程表内容较多，可适当缩小字体大小或调整内边距，确保能在单页放下两份
• 部分浏览器可能对@page的支持略有差异，可多测试几种主流浏览器（Chrome、Firefox）

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