html - Chrome 尝试将简单的 html 文档打印为 31K+ 空白页面
问题描述
我有一个简单的 html 文档(参见 - https://5fa3b1d135e99.htmlsave.net)。当我尝试打印(cmd/ctrl+P)此文档时,chrome 将打印大小评估为 31,776 页:
经过一些研究,当从 中删除gap
属性时.block-row
,它是固定的,但我不知道是什么原因,另外 - 我确实需要间隙。
有任何想法吗?
如果链接过期,输出如下:
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700');
@media print {
* {
-webkit-print-color-adjust: exact;
}
.block-row,
.block-signature {
break-inside: avoid;
}
}
html,
body {
margin: 0;
}
body {
font-size: 10px;
font-family: "Open Sans";
}
.page-header {
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #eaeaea;
padding-bottom: 8px;
margin: 0 24px 24px;
width: 100%;
}
.page-header > div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.page-header > div > .a-logo-container,
.page-header > div > .other-logo-container {
flex: 1;
}
.page-header > div > .a-logo-container {
display: flex;
align-items: center;
justify-content: center;
}
.page-header .a-logo {
display: block;
width: 79px;
height: 20px;
}
.page-header .other-logo-container {
display: flex;
align-items: center;
}
.page-header .other-logo {
background: none no-repeat center center / contain;
display: block;
width: 40px;
height: 20px;
}
.page-header .other-logo-container {
gap: 8px;
}
.page-header .other-logo-container h2 {
font-size: 10px;
}
.page-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
font-size: 8px;
font-weight: 400;
width: 100%;
margin: 0 24px;
color: #999;
}
.block-box {
padding: 16px 24px;
background-color: #f9f9f9;
border-radius: 8px;
margin: 16px 0;
}
.block-box .block-column {
gap: 10px;
}
.block-row {
display: flex;
gap: 32px;
}
.block-row > * {
flex: 1;
}
.block-row > * + * {
margin: 16px;
}
.block-column {
display: flex;
flex-direction: column;
}
.block-text,
.block-start-end-time {
display: flex;
flex-direction: column;
gap: 6px;
}
.block-inline-key-value {
display: flex;
gap: 16px;
}
.block-inline-key-value > strong {
font-weight: 600;
}
.block-inline-title {
display: block;
border-bottom: 2px solid;
line-height: 25px;
font-weight: 600;
}
.block-container .label {
white-space: nowrap;
}
.block-title {
background-color: #f9f9f9;
padding: 6px 12px;
border-radius: 8px;
font-weight: 600;
}
.block-item {
display: block;
align-items: center;
}
.block-radios {
display: flex;
flex-direction: column;
gap: 8px;
}
.block-radios .checkbox {
width: 12px;
height: 12px;
border-radius: 100%;
border: 1px solid #c4c4c4;
box-shadow: 0 0 0 1px #fff inset;
}
.block-radios .checkbox[data-checked="true"] {
background-color: #292929;
}
.block-radios > .block-container {
display: flex;
}
.block-radios > .block-container > * {
width: 100%;
}
.block-checkboxes {
display: flex;
flex-direction: column;
gap: 8px;
}
.block-checkboxes > .block-container {
display: grid;
flex-wrap: wrap;
gap: 10px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.block-checkboxes .checkbox {
width: 12px;
height: 12px;
border: 1px solid #c4c4c4;
border-radius: 2px;
}
.block-checkboxes .checkbox[data-checked="true"] {
border-color: #292929;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABISURBVHgBfYzBDQAQEASvBCUoQUk6oRSlqIgSlgvigrPJfCaTJVIGwHcMfYKAsSylY46gLsfSTMGkKxBPEXt3cIRFDURoX74BA3ZgYkt9TZoAAAAASUVORK5CYII=) no-repeat center center #292929;
}
.block-signature {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 12px;
min-height: 100px;
}
.block-signature .signature-title {
border-top: 2px solid;
width: 100%;
text-align: center;
padding: 8px;
box-sizing: border-box;
max-width: 50vw;
}
.block-signature .signature-container > img {
transform: translateY(50%);
height: 80px;
}
<!DOCTYPE html>
<html>
<body>
<section class="blocks">
<div class="block-row">
<div class="block-radios">
<div class="block-inline-title">Radio</div>
<div class="block-container">
</div>
</div>
</div>
<div class="block-row">
<div class="block-title">Main Header</div>
</div>
<div class="block-row">
<div class="block-radios">
<div class="block-inline-title">Drop Down</div>
<div class="block-container">
</div>
</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Short Text</div>
<div class="block-container">
<div class="block-item">lorem ipsum</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Number</div>
<div class="block-container">
<div class="block-item">100</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-row">
<div class="block-signature">
<div class="signature-container"><strong>Tracey Kutch</strong>
</div>
<div class="signature-title">Patient Name</div>
</div>
<div class="block-signature">
<div class="signature-container">None</div>
<div class="signature-title">Signature</div>
</div>
<div class="block-signature">
<div class="signature-container"><strong>2020-11-04T00:00:00Z</strong>
</div>
<div class="signature-title">Date</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-start-end-time">
<div class="block-inline-title">Time</div>
<div class="block-container">
<div class="block-item">Invalid Date</div>
</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-title">TODO Image @Newbie012</div>
</div>
<div class="block-row">
<div class="block-title">TODO Chart @Newbie012</div>
</div>
<div class="block-row">
<div class="block-row"></div>
</div>
<div class="block-row">
<div class="block-checkboxes">
<div class="block-inline-title">Multiple Select (check)</div>
<div class="block-container">
</div>
</div>
</div>
<div class="block-row">
<div class="block-radios">
<div class="block-inline-title">Yes/No</div>
<div class="block-container">
</div>
</div>
</div>
<div class="block-row">
<div class="block-title">Sub Header</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Long Text</div>
<div class="block-container">
<div class="block-item">TypeScript supports JSX transpilation and code analysis. If you are unfamiliar with JSX here is an excerpt from the official website: JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended
to be implemented by engines or browsers. It's NOT a proposal to incorporate JSX into the ECMAScript spec itself. It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.
The motivation behind JSX is to allow users to write HTML like views in JavaScript so that you can: Have the view Type Checked by the same code that is going to check your JavaScript Have the view be aware of the context it is
going to operate under (i.e. strengthen the controller-view connection in traditional MVC). Reuse JavaScript patterns for HTML maintenance e.g. Array.prototype.map, ?:, switch etc instead of creating new (and probably poorly typed)
alternatives. This decreases the chances of errors and increases the maintainability of your user interfaces. The main consumer of JSX at this point is ReactJS from facebook. This is the usage of JSX that we will discuss here.</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-row">
<div class="block-signature">
<div class="signature-container"><strong>Eliya Local</strong>
</div>
<div class="signature-title">Employee Name</div>
</div>
<div class="block-signature">
<div class="signature-container">None</div>
<div class="signature-title">Signature</div>
</div>
<div class="block-signature">
<div class="signature-container"><strong>2020-11-04T00:00:00Z</strong>
</div>
<div class="signature-title">Date</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-row">
<div class="block-signature">
<div class="signature-container"><strong>Signature</strong>
</div>
<div class="signature-title">Patient Name</div>
</div>
<div class="block-signature">
<div class="signature-container">None</div>
<div class="signature-title">Signature</div>
</div>
<div class="block-signature">
<div class="signature-container"><strong>2020-11-04T00:00:00Z</strong>
</div>
<div class="signature-title">Date</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Date</div>
<div class="block-container">
<div class="block-item">12/Sa/1996</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-start-end-time">
<div class="block-inline-title">Time</div>
<div class="block-container">
<div class="block-item">Invalid Date</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Add Free Text</div>
<div class="block-container">
<div class="block-item"></div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-title">TODO Chart @Newbie012</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Blood Pressure</div>
<div class="block-container">
<div class="block-item">100 / 90</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-row"></div>
</div>
<div class="block-row">
<div class="block-row"></div>
</div>
<div class="block-row">
<div class="block-row"></div>
</div>
</section>
</body>
</html>
解决方案
正如@kaiido 所指出的,罪魁祸首似乎是.block-row
该gap
物业的空置。
我们遇到了同样的问题,并在 Chrome 中发布了一个错误,请参见链接。
gap
我们的解决方案是在容器为空时移除该属性。
在你的情况下
.block-row { display: flex; gap: 32px; }
.block-row:empty { gap: unset; }
推荐阅读
- android - 启用许可证测试的应用内购买错误 [DF-BA-AH-01]
- angular - 资产未考虑基本 href url - 未找到错误
- linux - Web 连接重定向到 https://localhost
- identityserver4 - IdentityServer4 用证书文件替换 AddDeveloperSigningCredential
- c# - ReSharper Ultimate 错误“对文件的修改不一致...”
- java - 如何使用子字符串拆分文件名并使用 Java 生成 .csv 文件?
- oracle-apex-5.1 - # Oracle Apex 5.1 - 创建自定义模板并在数据库应用程序中使用它
- microsoft-dynamics - 如何从 NAVISION 中的其他表中获取具有主键的数据
- r - 如何使用 str_detect 过滤 R 中的顶级域?
- javascript - React - 道具不会在整个组件中更新相同