krksgbr / html2print

html2print

Fork of osp.tools.html2print.

The purpose of this fork is to provide a straightforward way of creating web/print hybrid publications, and to make it easy to integrate with existing web projects.

Usage:

1. clone the repository and put it somewhere in your project

2. link dist/js/html2print.js to the html file that you want to turn into print. the script depends on jquery, so make sure to have it linked before html2print.

3. copy the h2p_config.json to the root of your project directory and change its settings to your requirements. page settings, print-specific stylesheets and scripts are defined here. the script files that are defined in this configuration will only execute in the context of the print document. if your print-specific script defined in the config file is also dependent on jquery, then jquery should also be listed in the config file.

   for example:

   {
       "pages": {
           "count": 100,                          <---     there is no way of knowing how many pages will be needed beforehand.
           "paper-width":      "210mm",                    empty pages will be trimmed at the end of the process.
           "paper-height":     "297mm",
           "crop-size":        "5mm",
           "bleed":            "3mm",
           "margin-inside":    "50mm",
           "margin-outside":   "8mm",
           "margin-bottom":    "25mm",
           "margin-top":       "10mm",
           "header-height":    "10mm",
           "footer-height":    "10mm",
           "header-text":      "''",
           "footer-text":      "''",
           "mirror":           "true"           
       },
   
       "styles": {
           "print":        "css/print.css",    
           "ui-override":  "css/h2p-ui.css"    <--- override default ui style
       },
   
       "scripts": [
               "../lib/jquery/dist/jquery.min.js",
               "js/print.js"
       ],
   
       "route": "#print"    <--- this will define what route will be created for the print version. this is also shareable.
   }
   

4. mark html elements that should be included in the print version with the 'h2p-content' class. if within these there is content that should be excluded, mark it with the 'h2p-exclude' class.

   for example:

   <div id="#my-content" class="h2p-content">
   
       <div>Amazing Stories</div>
   
       <div id="#not-for-print" class="h2p-exclude">
       </div>
   
   </div>
   
   

5. to force a page break after an element, mark it with the 'h2p-break-after' class.

6. invoke the script by calling H2P.init(). it will then process the source document into a print version applying the stylesheets and scripts that were specified in the configuration file.

7. there is a possibility to specify code to be run as soon as the layout process has finished and the pages are ready. this is handy when there is a requirement to have access to the pages, for example for putting page-numbers or other content to locations that the default html2print style setup doesn't allow for. this is accomplished by running H2P.doAfterLayout(function(){ stuff(); }); in a script defined in the config file. for example:

   H2P.doAfterLayout(function(){
       $('.page').each(function(index){
           var customPageNumber = $("<div>").text(index+1).addClass("custom-page-number");
           $(this).find( ".body" ).append(customPageNumber);
       });
   });
   

8. to remove it, call H2P.remove();

That's all. To learn more, have a look at the example folder.

Browser support

tested in Firefox 44.0.2 and Chrome 49.0.2623.87 on Mac OSX 10.11.3

in Safari it's currently broken. `

Attributions

the original html2print by Open Source Publishing

less.js

license

CSS Regions Polyfill

license