Question

我正在构建专门用于打印的HTML页面。我想在打印报告上放置文本框（DIV），准确地说是客户想要的位置。

挑战：

我的HTML需要打印2页。
每个页面需要包含一个距离左侧一英寸，距离顶部一英寸的盒子。盒子宽1英寸，高1英寸。

听起来很简单，对吧？

我提出了以下HTML代码，但它包含一个问题。在第2页上，该框打印的位置略高于第1页。您可以在打印预览中发现问题。问题出现在我试过的每个浏览器中......所以我甚至不能责怪浏览器！

有什么想法吗？

这是我的尝试：

<!DOCTYPE html>
<html>
<head>
    <style>

        @page {
            margin: 0mm;
        }

        .box {
            position: absolute;
            left: 1in;
            top: 1in;
            width: 1in;
            height: 1in;
            background-color: gray;
            overflow:hidden;
        }

        .page {
            page-break-after: always;
            position: relative;
            height: 297mm;
            width:210mm;
        }
    </style>
</head>
<body>


<div class="page" id=page1">
    <div class="box">this box is placed properly.</div>
</div>

<div class="page" id=page2">
    <div class="box">this box is just a bit too high!</div>
</div>

</body>

Answer 1

[(value)]上有默认保证金，在我的浏览器中为<mat-select [(value)]="company.headquarter.country"> <mat-option *ngFor="let country of companyService.countries" [value]="country"> {{country.name}} </mat-option> </mat-select>，因此您应将其更改为：

body

顶部位置现在是相同的，但我的浏览器最后显示了一个额外的页面，你可以做一些技巧来摆脱它：

8px

另请参阅：HTML default body margin，how to avoid extra blank page at end while printing?

打印HTML：无法在第2页上放置DIV

1 个答案: