Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <ul> <li>Define a print stylesheet for your page. You do this by using the @media print declaration.</li> <li>What you can then do is wrap each partial view on the page that you are going to print in a div and apply the <code>'page-break-before: always'</code> CSS attribute to it.</li> </ul> <p>This will ensure that each partial view ends up on a different page. Call <code>'window.print()'</code> on the page load and you're done!</p> <hr> <p><em>Given the extensive questions posed in the comments for this answer, here is a more detailed description of what needs to be done:</em></p> <h2>Preparation</h2> <ul> <li>A stylesheet needs to be defined and applied to the page which defines what the page will look like when printed. <ul> <li>This can either be done by using a <code>@media print { }</code> declaration in an existing stylesheet, or by applying the <code>media="print"</code> attribute to the <code>link</code> tag in your page which includes the stylesheet. You appear to have done this correctly.</li> <li>This stylesheet must include a <code>page-break-before: always</code> declaration for all elements before which you would like there to be a page break. You seem to have done this with inline styles. Personally I would have rather done this in the print stylesheet than as an inline style. This step is integral to you being able to print one item per page.</li> </ul></li> </ul> <h2>Printing</h2> <ul> <li><code>window.print()</code> allows you as the page author to define when the page is printed. This does the same thing as <kbd>CTRL</kbd> + <kbd>P</kbd> or as clicking the print button, except you can do it from your JavaScript.</li> <li>Ajax has nothing intrinsically to do with printing. Ajax is a means to asynchronously make HTTP calls from your page without changing or reloading it and updating your page as a result. If you wanted to dynamically populate your page with items to print based on user input, then you could very well do so with Ajax. If you merely want to print the page, then you don't need to use Ajax. the navigator.**</li> </ul> <h2>Two important points:</h2> <ul> <li><code>window.print()</code> prints the page that is currently onscreen. If you want to print a different page, you need to load the other page in some way shape or form (perhaps through a popup) and call window.print() on that page.</li> <li>The print stylesheet defines what the printed page will look like in contrast to the onscreen version. This means that you can have a page of items and lots of other stuff, and print only the items when the user clicks the print button. You would do this by setting the <code>display: none</code> property in your print stylesheet on all the elements that you do not want to appear on the printed page.</li> </ul> <h2>About PDFs:</h2> <p>I have nothing against exporting pages to PDF when necessary, but as you did not specifically ask about a PDF solution, I have given you the HTML+CSS solution to your question. PDFs also take a minute to generate and load. They are great, however, when your users will want to save copies of what they are printing. If this is the case for your site I strongly recommend that you consider such a solution.</p> <h2>Testing:</h2> <p>How do you test a print stylesheet? The easiest way is to simply click the print button in Chrome which will show you a lovely preview of what your site is going to look like when it is printed.</p> <h2>Final word:</h2> <p>For now, forget about <code>window.print()</code> and just focus on getting your page looking like it should by applying the appropriate CSS. Write your CSS, run your page, look at the output in Chrome, modify your print stylesheet as needed... Rinse and repeat. Only once you have the page appear exactly as you want it when clicking the print button should you then look at calling the print function automatically in your JavaScript.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload