Printing multiple pages with Javascript

Question

I have a website where users click a read more button so that they can view the rest of the information on the page. I am curious how I could make it so that users do not have to print each page seperately. I would like to be able to make it so that I could have a script that print's related pages. I'f anyone could help me out and point me in the right direction it would be greatly appreciated. I need this functionality to work in all browsers.

Thanks

Replace the "read more button" with the scrollbar built into the browser. — Quentin, Jan 11 '12 at 17:21

score 5 · Accepted Answer · answered Jan 11 '12 at 17:24

What you will need to pull this off is a stylesheet that utilizes media styles. It is basically like having two seperate stylesheets; one for printing and one for viewing. In order to be bandwidth conservative leave the printarea empty until the request is made. On the request event fill in the printarea with the whole print you with to do. I would suggest you look into jQuery and their load and ajax requests for this.

@media screen
    {
    #screenarea
        {
        display: block;
        }
    #printarea
        {
        display: none;
        }
    }
@media print
    {
    #screenarea
        {
        display: none;
        }
    #printarea
        {
        display: block;
        }
    }

score 3 · Answer 2 · answered Jan 12 '16 at 19:50

After you have all your content in a single web page (using either injection or a server process), formatting pages uses CSS attributes for @media print, e.g.:

@media print {
    h1 {page-break-before: always;}
}

Other attributes are "page-break-after" and "page-break-inside", the latter of which helps avoid breaks inside content.

score 0 · Answer 3 · answered Apr 05 '22 at 17:57

It works if you wrap the content in a table for some reason. I recently made an existing feature in an updated app and had to look at how it was done in the old app. Uglier design, but indeed more than one page in the browser print dialog.

Couldn't find any documentation on it so it might be possible with other elements as well, but divs always cut the print area down to one document.

Ended up doing a table based layout with a simple but cleaner design. Was pretty happy with the results actually.

score 0 · Answer 4 · answered Jan 11 '12 at 17:23

My gut feeling first told me that it would require a server-based solution, because the window.print function only prints what is in the current document, and that you should write server code to produce a web page consisting of all the pages you want to print, and invoke window.print from that page.

But you could make jQuery work for you, downloading the pages to be printed using .load function, and then after all pages are loaded, invoke window.print. If you can't use jQuery for some reason, you could write the entire plumbing yourself using XHR.

It is difficult to provide a more detailed answer without having any information about the structure of your web app.

score 0 · Answer 5 · answered Jan 11 '12 at 17:25

0

I think that you can print it on an iframe inside a layer

tihs is an example (not very nice, but works for the idea):

http://www.fffast.com/scripts/script_iframing.shtml

answered Jan 11 '12 at 17:25

MCSI

2,818
26
35

score 0 · Answer 6 · answered Jan 11 '12 at 17:25

In general, you wouldn't use JavaScript to access multiple pages and print them. (If it's even possible, it sounds like it would be a bit of a hack.)

Instead, you'd probably want to have one page which contains all of the information to be printed, CSS-styled for printability, which the user would view and be able to print. (In this case you can easily use JavaScript to initiate the print action.)

Perhaps a "print all" link which directs the user to a page (or opens a page in a new target) which contains all of the information for printing?

You could even take it a step further and make it a little more dynamic. Maybe have checkboxes next to the headings for each section of information and a button to "print selected" which would post the selections to the server and render only the selected information to the "print all" page.

I just feel that, as a user, this would adhere more to least astonishment than something that prints things I didn't even download in the first place (where you also run the risk of sending too much to a user's printer and wasting their resources).

Edit:

Another approach that just occurred to me. Does all of the content need to be on separate pages in the first place? Maybe just put the content in divs which are hidden by default, and the "read more" link shows the associated div. Then all you need for the printability is the aforementioned CSS media style. When viewing in the browser they can expand/collapse information sections individually, but when the page is printed everything is expanded.

Printing multiple pages with Javascript

6 Answers6

Linked