title: Create a download multipage pdf from html using .print()
body: <p>I'm creating some books by some datas taked with a json, I created a html page to set the print layout but i need to export it, but not by the printer panel I already created a second page (printPdfBook.html) like for the print html file (printBook.html), with the same settings. I tryed some libraries like jsPDF, html2canvas, but when I click on the download button the css setting are lost or I have to create a separated setting for each books and I can't.
  I wrote i would use .print() but any useful idea is welcome.
  Can someone help me?
  Advance thanks to all.
  Attached the table structure i used for the print html file.</p>
  <pre><code>&lt;section id=&quot;bookCover&quot; class=&quot;sheet&quot;&gt;
          &lt;table class=&quot;coverPage&quot;&gt;
                  &lt;thead class=&quot;coverHead&quot;&gt;
                      &lt;tr class=&quot;coverLogoSpace&quot;&gt;
                          &lt;th class=&quot;coverLogo&quot;&gt;
                              &lt;img class=&quot;coverLogoImg&quot; src=&quot;/padova/img/logo2.png&quot;/&gt;
                          &lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
              &lt;tbody class=&quot;coverBody&quot;&gt;
                  &lt;tr class=&quot;coverBodyTitle&quot;&gt;
                      &lt;th class=&quot;coverTitle&quot;&gt;
                          {{mod.name}}
                      &lt;/th&gt;
                      &lt;th class=&quot;coverBookTitle&quot;&gt;
                          {{title}}
                      &lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
              &lt;tfoot&gt;
                  &lt;tr class=&quot;featuresCol&quot;&gt;
                      {{#with mod}}
                      {{#each features}}
                          {{#if value}}
                              &lt;td class=&quot;featureNameSpace&quot;&gt;{{name}}&lt;/td&gt;
                          {{/if}}
                      {{/each}}
                      {{/with}}
                  &lt;/tr&gt;
                  &lt;tr class=&quot;featureNamesCol&quot;&gt;
                      {{#with mod}}
                      {{#each features}}
                          {{#if value}}
                              &lt;td class=&quot;featureValueSpace&quot;&gt;{{value}}&lt;/td&gt;
                          {{/if}}
                      {{/each}}
                      {{/with}}
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class=&quot;footerInfo&quot;&gt;&lt;/td&gt;
                    &lt;/tr&gt;   
              &lt;/tfoot&gt;
          &lt;/table&gt;
      &lt;/section&gt;
  
      {{#each pages}}
              
      &lt;section class=&quot;sheet&quot;&gt;
          
          &lt;table class=&quot;snglImgTable&quot;&gt;
              &lt;tbody class=&quot;snglImgBody&quot;&gt;
                  &lt;tr class=&quot;snglImgCol&quot;&gt;
                      {{#with picture}}
                          &lt;th class=&quot;snglImg{{ifW w h}}&quot;&gt;
                              &lt;img class=&quot;snglImgDetail {{ifW w h}}&quot; src=&quot;{{url}}&quot;/&gt;
                          &lt;/th&gt;
                      {{/with}}
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
                  
      {{/each}}
  
      &lt;/section&gt;
  </code></pre>
  <pre><code>    #buffering{
      display: block;
      width: 100%;
      margin:0px;
      padding:0px;
  }
  .bufferingGif{
      width: 50px;
      float: left;
      margin-left: calc(50% - 25px);
      margin-right: calc(50% - 25px);
      margin-top: 350px;
  }
  .bufferingText{
      width: 250px;
      float: left;
      margin-top: 15px;
      margin-left: calc(50% - 125px);
      margin-right: calc(50% - 125px);
      font-size: 1em;
      color: rgb(80,80,80);
      text-align: center;
      font-family: 'Mulish', sans-serif;
  }
  #contentItem{
      opacity: 0;
  }
  @media print{
      html{
          width: 210mm;
          margin:0mm;
          padding: 0mm;
      }
      body{
          width: 210mm;
          padding: 0mm;
          margin: 0mm;
      }
      #buffering{
          display: none;
      }
      #contentItem {
          opacity: 1;
          width: 210mm;
          height: 297mm;
          margin: 0mm;
          padding: 0mm;
      }
      table{
          width: 210mm;
          padding: 0mm;
          margin: 0mm;
      }
      .coverPage{
          width: 210mm;
          padding: 0mm;
          margin: 0mm;
      }
      .coverHead{
          width:210mm;
          margin:0mm;
          padding:0mm;
      }
      .coverLogoSpace{
          width:210mm;
          margin:0mm;
          padding:0mm;
      }
      .coverLogo{
          display: block;
          width: 50mm;
          margin-right:80mm;
          margin-left:80mm;
          margin-top: 30mm;
      }
      .coverLogoImg{
          width: 100%;
          margin: 0mm;
          padding: 0mm;
      }
      /*body cover*/
      .coverBody{
          width:210mm;
          margin:0mm;
          padding:0mm;
      }
      .coverBodyTitle{
          display: block;
          width:100mm;
          margin-left: 55mm;
          margin.right: 55mm;
          margin-top: 80mm;
      }
      .coverTitle{
          display: block;
          font-size: 30pt;
          font-family: 'Mulish', sans-serif;
          text-align: center;
          text-transform: uppercase;
          color:black;
          font-weight: normal;
          opacity: 0.8;
          border-bottom: 0.5mm solid black;
      }
      .coverBookTitle{
          display: block;
          font-size: 12pt;
          font-family: 'Mulish', sans-serif;
          text-align: center;
          text-transform: uppercase;
          color:black;
          font-weight: normal;
          opacity: 0.4;
      }
      .featuresCol{
          display: block;
          width: 140mm;
          padding: 0mm;
          margin-right: 35mm;
          margin-left: 35mm;
          margin-bottom: 0mm;
          margin-top: 120mm;
          text-align: center;
      }
      .featureNamesCol{
          display: block;
          width: 140mm;
          padding: 0mm;
          margin-right: 35mm;
          margin-left: 35mm;
          margin-bottom: 0mm;
          text-align: center;
      }
      .featureNameSpace{
          width:20mm;
          margin:0mm;
          padding:0mm;
          font-family: 'Mulish', sans-serif;
          font-size: 10pt;
          text-transform: uppercase;
          opacity: 0.6;
      }
      .featureValueSpace{
          width:20mm;
          margin:0mm;
          padding:0mm;
          font-family: 'Mulish', sans-serif;
          font-size: 10pt;
          opacity: 0.8;
      }
      .footerInfo{
          display: block;
          width:190mm;
          margin-left:10mm;
          margin-right:10mm;
          margin-bottom: 10mm;
          font-size: 8pt;
          color: black;
          opacity: 0.6;
          margin-top: 3mm;
          text-align: center;
          font-family: 'Mulish', sans-serif;
          font-weight: normal;
      }
      /* pagine book */
      .snglImgTable{
          width: 210mm;
          height: 297mm;
          margin:0mm;
          padding:0mm;
          display: block;
          overflow: hidden;
      }
      .snglImgBody{
          width: 200mm;
          height: 287mm;
          margin:5mm;
          padding:0mm;
          display: block;
          overflow: hidden;
      }
      .snglImgCol{
          width: 100%;
          height: 100%;
          margin:0mm;
          padding:0mm;
          display: block;
          overflow: hidden;
      }
      .snglImgverticalBasedImg{
          height: 287mm;
          width:200mm;
          margin: 0mm;
          overflow: hidden;
          display: table-cell;
          vertical-align: middle;
      }
      .snglImghorizzontalBasedImg{
          width: 200mm;
          height: 141mm;
          margin: 0mm;
          margin-top: 78mm;
          margin-bottom:78mm;
          overflow: hidden;
          display: block;
      }
      .snglImgsquareBasedImg{
          width: 200mm;
          height: 200mm;
          margin: 0mm;
          margin-top: 48.5mm;
          margin-bottom:48.5mm;
          overflow: hidden;
          display: block;
      }
      .verticalBasedImg{
          width: 200mm;
          overflow: hidden;
          display: block;
          display: table-cell;
      }
      img.verticalBasedImg{
          vertical-align: middle;
      }
      .horizzontalBasedImg{
          width:200mm;
          height: auto;        
      }
      .squareBasedImg{
          width:200mm;
          overflow: hidden;
      }
  }
  </code></pre>