Question

我的html发票在屏幕上显示得很好。我想将它打印到预先格式化的纸张上。该论文有三个部分

标题（从页面顶部开始固定的高度）

身体（由1 - N行组成的表）

页脚（从页面底部开始固定的高度）

我尝试过使用CSS并使用#InvFooter和CSS

创建一个div

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

@page { size:8.5in 11in; margin: 2cm }


#InvFooter {position:absolute;left:50px;bottom:0px;}

我有两个我无法弄清楚的问题。

如何将页脚固定在打印页面的底部。
如果表格中有太多行，如何将Body限制为页面的固定部分并溢出到另一页面。

Answer 1

简单回答：不要，html / css从未打算用于打印。即使您可以“破解”绝对尺寸以适合您当前的打印机，也无法保证它们适合下一个（或客户）。

出于这个原因，PDF被发明了，为了让您希望以打印格式（以及高便携性）获得期望。

通过使用PDF，您可以保证获得固定（纸张）尺寸。

您将能够找到免费的pdf解决方案（开源）以及商业解决方案（例如Dynamic PDF - 还有许多其他解决方案），允许您从.Net生成PDF从基于服务器的应用程序中飞行/动态，不依赖于Adobe产品。

Answer 2

这是我遇到的最好的CSS打印技术汇编。它与W3标准有很深的联系，很好的例子，第三方推荐的HTML - ＆gt; PDF软件和一个方便的JPEG，可以查看16个不同的页边距选择器。它让我开始，现在我可以打印100多个不同长度的项目摘要，以便进行高管评审。

文章： https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
方便花花公子的边距JPEG： https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/12/1-image-margin-boxes-large-opt.jpg
演示HTML书： https://github.com/rachelandrew/css-for-print/blob/master/book.html
演示打印CSS： https://github.com/rachelandrew/css-for-print/blob/master/pdf-styles.css

希望这有帮助！

EDIT 这些可能就是你要找的东西：

.invoice {
   page-break-before: always;
}

.invoice h1.title {
   page-break-after: avoid;
}

.invoice .line-item {
   page-break-inside: avoid;
   page-break-after: auto;
}

EDIT 格式化纸张如何容纳多页发票？你必须单独打印每张发票......呃

使用CSS在预先格式化的纸张上打印发票

2 个答案: