打印网页时样式丢失怎么办？

司徒赛赛提问于 2026-03-03 17:22:24 阅读 14

交互

我在做一个订单详情页，用户需要点击“打印”按钮把页面内容打印出来。本地预览时样式都正常，但一调用 window.print() 打印，字体变小、布局错乱，连颜色都没了！

我试过加了个打印专用的 CSS，用 @media print 包裹，但好像没生效。是不是还要设置什么属性？下面是我目前的打印样式：

@media print {
  body {
    font-size: 14px;
    color: #000;
    background: #fff;
  }
  .no-print {
    display: none;
  }
}

打印功能数据交互

我来解答赞 2 收藏

反馈

1 条解答

诸葛洛熙 Lv1

这问题太经典了，浏览器默认为了省墨，会把背景色和背景图片都干掉，这就是你样式丢失的主因。另外，打印页面的宽度和屏幕不一样，响应式布局在A4纸上通常会崩。

首先得强制浏览器打印背景色。在你的 @media print 里加上这个属性：-webkit-print-color-adjust: exact; 或者 print-color-adjust: exact;。

其次，布局要重置。别依赖屏幕上的百分比宽度，打印时最好给个固定的宽度或者直接 100%，把浮动布局改成块级布局，不然很容易错位。

给你改一段能用的代码，试试这个：

@media print {

    /* 强制打印背景色和图片 */

    body, div, table {

        -webkit-print-color-adjust: exact;

        print-color-adjust: exact;

    }



    /* 重置页面宽度，防止内容被切 */

    body {

        width: 100%;

        margin: 0;

        padding: 0;

        font-size: 14px; /* 打印字体太小看不清，稍微大点 */

        color: #000 !important;

        background: #fff !important;

    }



    /* 隐藏不需要打印的元素 */

    .no-print, button, nav {

        display: none !important;

    }



    /* 确保布局不乱，比如订单详情的容器 */

    .order-container {

        width: 100% !important;

        box-sizing: border-box;

        /* 移除浮动或Flex布局在打印时的副作用 */

        display: block;

    }

}

写好 CSS 后，在浏览器打印预览界面，记得勾选“背景图形”这个选项，虽然上面的 CSS 能强制一部分，但这个勾选框有时候还是起决定作用的。

如果 CSS 搞不定，或者样式极其复杂，作为后端我通常会建议直接在服务端生成 PDF，比如用 Puppeteer 或者 wkhtmltopdf 把 HTML 渲染成 PDF 流返回给前端，这样样式绝对不走样，就是稍微费点服务器资源。

2026-03-04 00:00