将HTML转换为PDF发票

问题描述 投票:2回答:2

我正在尝试生成HTML页面(C#Razor View),它将转换为PDF(使用wkhtmltopdf)并打印在预先打印的文具上。

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

整个发票生成为

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

那么如何在每个页面上设置X的边距,除了最后打印的页面和最后打印的页面上的内容,而不是实际打印的边距?

试图使用最后一个子选择器,但这不起作用。

也许其他一些解决方案更适合使用.Net Core(也可以使用一些linux应用程序)?

c# html css .net-core
2个回答
0
投票

您可以使用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


0
投票

最后我深究了这一点。由于页面的顶部不应该是一个问题(也可以以相同的方式处理,但表格thead是另一种选择)

我的解决方案是:

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

整个tick都在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它可能无法正常工作。

谢谢你的帮助

© www.soinside.com 2019 - 2024. All rights reserved.