将 HTML 转换为 PDF 发票答案

【问题标题】：Converting HTML to PDF Invoice将 HTML 转换为 PDF 发票
【发布时间】：2018-09-03 05:16:42
【问题描述】：

我正在尝试生成 HTML 页面（C# Razor View），该页面将被转换为 PDF（使用 wkhtmltopdf）并打印在预印的信纸上。

我的问题是，预印文具有一个标题（简单）底部的撕下部分（4 厘米）应该是空白的，直到打印一些附加信息的最后一页。

整个发票正在生成为

<table><thead></thead><tbody></tbody></table>

那么我怎样才能在除了最后打印的每一页上设置 X 的边距并在最后打印的页面而不是边距上实际打印一些东西？

尝试与 last-child 选择器一起使用，但没有奏效。

也许其他一些解决方案会更适合使用 .Net Core （也可以使用一些 linux 应用程序）？

【问题讨论】：

你试过:last-of-type选择器吗？ w3schools.com/cssref/sel_last-of-type.asp
刚刚尝试过 (tfoot:last-of-type { background-color: aqua; }。打印页面上的每个 tfoot 都已被选中。

标签： c# html css .net-core

【解决方案1】：

您可以使用 CSS @page 规则来指定页边距。您还可以使用它来为左右页（以考虑装订）和第一页指定额外的边距，但似乎不是最后一页！

/* Default left & right is 2cm, top & bottom margin is 4cm */
@page { margin: 4cm 2cm } 

/* First page, 10 cm margin on top */
@page :first {
  margin-top: 10cm;
}

/* Left pages, a wider margin on the left */
@page :left {
  margin-left: 3cm;
  margin-right: 2cm;
}

/* Right pages, a wider margin on the right */
@page :right {
  margin-left: 2cm;
  margin-right: 3cm;
}

延伸阅读：https://www.w3.org/TR/CSS21/page.html#page-box

【讨论】：

【解决方案2】：

我终于明白了。由于页面顶部应该没有问题（也可以用同样的方式处理，但是table thead是另一种选择）

我的解决办法是：

 wkhtmltopdf test.html --footer-html footer.html output.pdf

整个技巧就是使用 footer.html 文件：

<!DOCTYPE html>
<html>

<head>
    <script>
        var mainHeader = "test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>";
        var secondHeader = "OOOOOOOOOOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPOPPOPO<br>";

        function selectHeader() {
            var vars = {};
            var x = document.location.search.substring(1).split('&');
            for (var i in x) {
                var z = x[i].split('=', 2);
                vars[z[0]] = decodeURIComponent(z[1]);
            }

            if (vars["page"] == vars['topage']) {
                document.getElementById('main').innerHTML = secondHeader;
            } else {
                document.getElementById('main').innerHTML = mainHeader;
            }

            if (vars["page"] == vars['frompage']) {
                document.getElementById('test').innerHTML = secondHeader;
            }

        }
    </script>
</head>

<body onload="selectHeader()">

    <div style="min-height: 6cm; background-color: aqua; max-height: 6cm; overflow:visible;">
        <div id="main" onload="selectHeader()">
        </div>
    </div>
</body>

</html>

ps。在没有 !DOCTYPE html 的地方阅读它可能无法正常工作。

感谢大家的帮助

【讨论】：