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

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;} 

我有两个问题我想不通。

1. 如何将页脚固定到打印页面的底部。
2. 如果表格行数过多，如何将正文限制在页面的固定部分并溢出到另一个页面。

Answer 1

这是我遇到的最好的 CSS 打印技术汇编。它具有 W3 标准的深度链接、优秀的示例、第 3 方推荐的 HTML -> PDF 软件和一个方便的 JPEG，它显示了 16 个不同的页边距选择器。它让我开始了，现在我可以打印 100 多个不同长度的项目摘要，以供执行审查。

1. 文章： https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

2. 方便的页边距 JPEG： https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/12/1-image-margin-boxes-large-opt.jpg

3. 演示 HTML 书： https://github.com/rachelandrew/css-for-print/blob/master/book.html

4. 演示打印 CSS： https://github.com/rachelandrew/css-for-print/blob/master/pdf-styles.css

希望这会有所帮助！

编辑 这些可能是您正在寻找的：

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

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

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

编辑 格式化的纸张如何容纳多页发票？您必须单独打印每张发票......呃

Answer 2

简单的回答：不要，html/css 从来都不是用于打印的。即使您可以“修改”绝对尺寸以适合您当前的打印机，也不能保证它们会适合下一个（或客户的）。

出于这个原因，发明了 PDF，以提供您所期望的打印格式（以及高便携性）。

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

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