How to show custom print/paginated preview(with Page Boxes) using Javascript and CSS?

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 pr开发者_JAVA技巧eview 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

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.

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.

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.