5

我正在为 Web 应用程序中呈现的报告最终确定打印样式表，并且已收到有关不同机器上的一些打印问题的通知。在我的页眉之前添加分页符时，我注意到大量添加的空白，这似乎与分页符有关。当我background-color: green在页面的页眉或页脚中添加 , 等时，空白显然不是由于任何一个。我的 Windows 10 操作系统机器和我作为备份的 Mac 操作系统都创建了一个打印预览文档，该文档按照我的预期尊重分页符，但另一台运行 Windows 10 的机器显示了添加的空白。

更新- 遇到分页符问题的其中一台机器仅在特定 WiFi 连接上遇到问题。当连接到我工作位置的WiFi时，问题似乎从他的机器上消失了，但是当连接到他工作位置的WiFi时，问题又出现了。很诡异....

我正在申请page-break-before: always我的标题内容，我的网站代码如下：

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

* {
  box-sizing: border-box;
}

.page-portrait {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  margin-bottom: 2%;
  position: relative;
  width: 1350px;
  min-height: 279mm;
  padding: 30mm;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.report-row-preview {
  min-height: 4cm;
}

.header {
  margin-top: 1cm;
  page-break-before: always;
}

.footer {
  margin-top: 1cm;
}

.copyright {
  text-align: center;
  font-size: 10px;
  margin-bottom: 0;
}

@media print {
  html,
  body {
    width: 216mm;
    height: 279mm;
    background-color: white;
  }
  .page-portrait {
    border: none;
    box-shadow: none;
    padding: 0;
    margin-left: 4%;
    width: 100% !important;
  }
  .no-print {
    display: none !important;
  }
}
<div class="row page-portrait">
  <div class="row header">...</div>
  <div class="row report-row-preview">...</div>
  <div class="row report-row-preview">...</div>
  <div class="row report-row-preview">...</div>
  <div class="row footer">...</div>
</div>

最后，这是我所指的添加的空白区域的屏幕截图：

在此处输入图像描述

很高兴在必要时提供更多的清晰度，我只是用这个把头撞到墙上。

4

3 回答 3

0

我对奇怪的 wifi 问题无能为力……但至于一致的尺寸，您应该确保所有测量值都在打印机友好的单位中。

我的猜测是你得到了额外的空间，因为每个操作系统/机器在打印时都在解释px并且不同。percent

尤其如此，font-size根据屏幕密度的转换方式可能会有所不同。这反过来又会导致您的page-break规则和包装规则位于不同的位置。这会产生不同的间距。

尝试指定font-sizeinpt和width/ marginincm或mm

例如你有这个规则：

.page-portrait {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  margin-bottom: 2%;
  position: relative;
  width: 1350px;
  min-height: 279mm;
  padding: 30mm;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

我会改为：

margin-top: 1cm;
margin-bottom: 1cm;
width: 210mm;

也font-size: 10px可能转换为，font-size: 8pt但您需要使用该尺寸才能使其正确。

于 2019-10-01T17:34:36.380 回答
0

一个原因可能是机器具有不同的缩放设置，例如，笔记本电脑通常具有 125% 的缩放，这会影响浏览器。处理它的方法是让它在 125% 缩放时看起来不错，然后在 100% 缩放时得到一点空间，但是你会看到很多网站已经像这样工作了。

于 2019-10-03T18:55:04.773 回答
-2

您必须学习如何添加 css 以便它可以在两个 WiFi 网络上运行。确保以相对形式添加 css。

<link rel="stylesheet" type="text/css" href="mystyle.css"> 而不是http://acx/we.css。确保它是内部 css。有时，当您使用外部 css 并且您有不同的连接 WiFi 和 LAN 时，您的公司安全性会发生变化。因此，基于路径的公司可能会阻止 css。在 Chrome 的开发者工具中检查网络下的流量日志。检查 401。检查 css 在 Chrome 开发者工具中的元素下是否被覆盖。

于 2019-10-03T15:57:11.890 回答