如何使用Javascript和CSS显示自定义打印/分页预览（带页面框）？

我需要显示HTML内容的打印预览（可在单页中滚动）

请仔细阅读以下内容，并为我提供解决方案

输入将是一个动态原始数据（内容可能很大），我们可以应用一些标准的自定义CSS或javascript，并在页面中显示内容的打印预览。打印预览应该在所有边都有边距（空格），并且看起来应该像是将内容放在页面框中一样*

假设原始数据有200行，打印预览将显示50行/页

现在打印预览的第一页将有50行，当用户滚动页面时，第二页将显示51-100之间的行，以此类推。换句话说，页面的边距、高度和宽度是固定的，结果应该像打印在纸上的文本，而不是网页

提前感谢,，

---

Chandra

这要么不可能，要么真的很难实现，因为没有本机的跨浏览器缩放功能可以帮助您实现这一目标

此外，从浏览器中无法访问必要的信息（如打印机的页面大小和页边距）

---

我会让用户使用浏览器内置的打印预览

我不确定我是否正确理解了你的问题，但是：

我想您可以创建一个页面，使用边距、填充和行高来修改页面内容。您还可以将css文件链接到，

---

然后从浏览器中进行多次打印预览以测试外观。确定后，您可以在预览页面中添加一个iframe链接打印页面。

如果不必是“真实”预览，但只需让用户了解打印页面的外观，就可以使用打印样式表

我认为这篇文章可以作为一个很好的指南：

---

一旦制作了打印样式表，只需使用jquery按钮即可切换html内容的样式表。

当浏览器在真正的打印机上打印页面时，无法准确预测浏览器会做什么。例如，您不知道用户的打印机中是否有A4或US信纸！可以提及预览的页面大小，或者对最常用的页面大小进行多个预览。假设页面高度和页面宽度、边距空间是硬编码的。它不需要从打印机中取出。只有页数应该是基于内容量的动态页数我想补充一点，假设页面的高度和宽度、边距空间都是硬编码的。它不需要从打印机中取出。只有页数应该是基于内容量的动态页数。@用户，我认为即使在那时它也不起作用。技术手段根本不存在。浏览器的内置打印预览确实是goMain的目标所在，用户应该能感受到打印在纸上的内容的真实外观。页面对齐和将内容拆分为多个页面可以让用户真正感受到打印预览的效果。@用户抱歉，我很确定这是行不通的。您可以设置一个简单的样式表，尝试为预定义的HTML内容创建打印效果，但这很麻烦，而且很可能会中断，因为正如所说的，页面控制之外还有一些因素。打印样式表可以是一个解决方案，如果它能提供页面对齐的真实感觉，因为它们将打印在纸上（具有所有边距设置）. 正如我提到的，内容是动态的，只有CSS/Javascript可以决定对齐方式。不能在HTML文件中进行硬编码对齐更改。请提出建议。我编辑了答案，使用这种技术，您可以使用css编辑html的外观。我希望有帮助。