Chromium 升级到 108 后出现打印样式问题-解网

问：

描述

我的应用程序可以通过 HTML 模拟一系列可打印的 A4 标准页面，然后通过 Puppeteer 将它们打印为 pdf。就像这样：

点击查看图片

在 chromium 108 之前，页面样式在浏览器选项卡和打印预览中都是标准的 A4 格式。

浏览器更新到 chromium 108 后，打印预览中的页面样式搞砸了，但在浏览器选项卡中还是可以的，我没有更改任何代码!!就像这样：

点击查看图片

法典

html大致如下所示：

<html>
<head>
  ...
  <link rel="stylesheet" href="css/base.css" />
  <link rel="stylesheet" href="css/fancy.css" />
  <link rel="stylesheet" href="css/print.css" />
  ...
</head>

<body>
  <div id="container">
      <!-- This div in the page is a standard A4 format -->
      <div id="page1" class="page-node">
          <div class="pf w0 h0">
              <div class="page ml-page">content</div>
          </div>
      </div>

      <!-- This div in the page is a standard A4 format -->
      <div id="page2" class="page-node">
          <div class="pf w0 h0">
              <div class="page ml-page">content</div>
          </div>
      </div>
  </div>
</body>
</html>

有 3 个 CSS 文件：

base.css

/*! 
 * Base CSS for pdf2htmlEX
 * Copyright 2012,2013 Lu Wang <[email protected]> 
 * https://github.com/coolwanglu/pdf2htmlEX/blob/master/share/LICENSE
 */

@media print {
  @page {
    margin: 0;
  }
  html {
    margin: 0;
  }
  body {
    margin: 0;
    -webkit-print-color-adjust: exact;
  }
  #sidebar {
    display: none;
  }
  #page-container {
    width: auto;
    height: auto;
    overflow: visible;
    background-color: transparent;
  }
  .d {
    display: none;
  }
}

.pf {
  position: relative;
  background-color: white;
  overflow: hidden;
  margin: 0;
  border: 0;
}

@media print {
  .pf {
    margin: 0;
    box-shadow: none;
    page-break-after: always;
    page-break-inside: avoid;
  }
  @-moz-document url-prefix() {
    .pf {
      overflow: visible;
      border: 1px solid #fff;
    }
    .pc {
      overflow: visible;
    }
  }
}

fancy.css

/*! 
 * Fancy styles for pdf2htmlEX
 * Copyright 2012,2013 Lu Wang <[email protected]> 
 * https://github.com/coolwanglu/pdf2htmlEX/blob/master/share/LICENSE
 */
@media screen {
  .pf {
    margin: 13px auto;
    box-shadow: 1px 1px 3px 1px #333;
    border-collapse: separate;
  }
}

print.css

.w0 {
    width: 8.27in;
}

.h0 {
    height: 11.69in;
}

.page {
    position: absolute;
    top: 0;
    bottom: 0;
}

我想要什么

我想知道 chromium 108 中的渲染引擎是否有任何重大修改，以及如何解决此问题以使打印样式正常工作回到 A4 格式？

JavaScript HTML CSS 傀儡师 Chromium

Chromium 升级到 108 后出现打印样式问题

Print style issue occurred after chromium upgrade to 108

描述

法典

我想要什么

评论