如何用CSS @media print生成800px宽的单页连续PDF文档？

CSS方案（优先推荐） #

你之前用size:800px auto无效，是因为多数浏览器不支持auto作为@page的高度值。要实现单页连续效果，可以给@page设置一个足够大的高度，同时禁用页面自动分页：

@media print {
  /* 自定义打印页面尺寸：宽度800px，高度设为足够容纳内容的超大值 */
  @page {
    margin: 0;
    size: 800px 10000px; 
  }

  /* 禁止所有元素触发分页 */
  * {
    page-break-inside: avoid;
    page-break-after: avoid;
    page-break-before: avoid;
  }

  /* 确保内容容器不会被截断，溢出可见 */
  body, .content-container {
    overflow: visible !important;
    height: auto !important;
  }

  /* 隐藏不需要打印的元素（按需添加） */
  .no-print {
    display: none !important;
  }
}

如果不确定内容最大高度，也可以用size: 800px portrait，再配合强制不分页的样式，不过超大高度的方式更稳妥。

JS方案（动态适配内容高度） #

如果内容高度差异极大，CSS的固定超大高度不够灵活，可以用JS动态计算内容总高度，再设置@page的尺寸：

function printAsSinglePage() {
  // 获取内容总高度
  const contentHeight = document.body.scrollHeight;
  // 创建临时样式表
  const style = document.createElement('style');
  style.innerHTML = `
    @media print {
      @page {
        margin: 0;
        size: 800px ${contentHeight + 20}px; /* 加20px留余量 */
      }
      * {
        page-break-inside: avoid;
        page-break-after: avoid;
        page-break-before: avoid;
      }
      body {
        overflow: visible !important;
      }
    }
  `;
  document.head.appendChild(style);
  
  // 触发打印
  window.print();
  
  // 打印后移除临时样式
  setTimeout(() => {
    document.head.removeChild(style);
  }, 1000);
}

// 调用方法：比如给按钮绑定点击事件
// document.getElementById('print-btn').addEventListener('click', printAsSinglePage);

注意事项 #

• 不同浏览器的打印渲染略有差异，建议在Chrome中测试，它对CSS打印属性支持更完善。
• 如果页面有固定定位元素，打印时可能会重复出现在每页，需要在打印样式中把它们改成静态定位。

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