如何使用 Javascript 和 CSS 显示自定义打印/分页预览（带有页面框）？
我需要显示 HTML 内容的打印预览（可在单页中滚动）。
请仔细阅读以下内容并建议我解决该问题。
输入将是动态原始数据（内容可能很大），我们可以应用一些标准的自定义CSS或javascript并在页面中显示内容的打印预览。 *打印预览应该在所有边上都有边距（空格），并且应该看起来像内容放置在页面框中。*
假设原始数据有 200 行，打印预览将显示50 行/页，
现在打印预览中的第一页将有 50 行，当用户滚动页面时，第二页将显示 51-100 行，依此类推。换句话说，页面的页边距、高度和宽度是固定的，结果应该像打印在纸张上的文本，而不是网页。
提前致谢， 钱德拉
I need to show a print preview(Scrollable in single page) of the HTML content.
Please read the following carefully and suggest me the solution for the same.
The input will be a dynamic raw data(content can be huge), Can we apply some standard custom CSS or javascript and show the print preview of the content in the page.T*he print preview should have margins(spaces) in all sides and should look like the contents are placed in page boxes.*
Assume that the raw data has 200 lines, the print preview is going to show 50 lines/page,
Now the first page in print preview will have 50 lines and when the user scrolls the page, the second page will be shown with line from 51-100 and so on. In other words, the margin space, height and width of the page is fixed and outcome should be like texts printed on a papers, not as web page.
Thanks in advance,
Chandra
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这要么是不可能的，要么真的很难实现，因为没有原生的跨浏览器缩放功能可以帮助您实现这一目标。
此外，无法从浏览器中访问必要的信息（例如打印机的页面大小和页边距）。
我会让用户使用浏览器的内置打印预览。
This is going to be either impossible or really, really difficult to achieve because there is no native, cross-browser zooming functionality that could help you with this goal.
Also, necessary information (like the printer's page size and margins) is not accessible from within the browser.
I would have users use the browser's built-in print preview instead.
我不确定我是否正确理解您的问题，但是：
我想您可以使用边距、填充和行高创建一个页面来修改页面的内容。您还可以使用 media="print" 链接 css 文件，
< ;link rel="stylesheet" type="text/css" media="print" href="foo.css">然后，您可以从浏览器中进行多次打印预览以测试外观。如果可以的话，您可以在预览页面中添加一个链接打印页面的 iframe。
I am not sure if I understood correctly your question but:
I suppose you can create a page with using margin and padding and line-height to modify the content of the page. Also you link a css file with media="print",
<link rel="stylesheet" type="text/css" media="print" href="foo.css">Then you make several print preview from your browser to test the appearance. When it's ok, you can add an iframe in your preview page which link the print page.
如果它不必是“真实”预览，而只是让用户了解页面的打印效果，则可以使用打印样式表。
我认为这篇文章可以是一个很好的指南： http:// css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/
一旦你制作了打印样式表，你只需按下按钮就可以使用 jquery 在 html 内容上切换样式表。
If it doesn't have to be a 'true' preview, but just give the user an idea of what the page will look like printed, you can use a print stylesheet.
i think this article can be a good guide: http://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/
once you have made your print stylesheet, you can just use jquery to switch stylesheets on your html content at the push of a button.