html - 将 内容格式化为 A4/US Letter 的打印预览

Question

我有一个 <div>其内容代表我的服务器将打印的发票。 <div>里面的一些东西是 contentEditable=true .每个页面都应该有不同的页眉和页脚等。

我想要这个 <div> 的内容以打印预览的形式呈现。

很容易设置 width的 <div>为 A4，或任何页面大小。

但是如何制作 <div> height 页面数量的适当倍数，以及如何获取<div>内的内容跳过页面边界？

Answer 1

好问题将:

其背后的主要思想不是创建有限的 height 调整，而是创建自动高度 - 假设您的 div 上没有边框/p>

我将实现以下样式:

[DivSelector]{
    width: [Your full A4 width - any print margins ];
    /* set minimum height to 1 page height */
    min-height: [A4 PageHeight in Px];
    height: auto;
    overflow: auto; /*  ensure that your content remains within the div */
}

我以前尝试过，但使用的是 A3 显示屏。当然，当您打印时，您的打印机会添加它自己的边距，因此将您的页面设置为 width: [FullPage Width - PageMarginSetOnPrinter]

很重要