title: Print HTML with ChartJS
body: <p>I'm using <a href="http://www.chartjs.org/" rel="nofollow noreferrer">ChartJS</a> to generate a chart.</p>
  
  <p>And I'm using the command below <a href="https://stackoverflow.com/a/30077759">StackOverflow</a></p>
  
  <pre><code>&lt;script&gt;
  function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     document.body.innerHTML = originalContents;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>To print the HTML content.</p>
  
  <p><strong>Problem:</strong> when I ask to print with these commands it does not print the graphic (which is loaded via JS). When I use only <code>window.print();</code> it prints all HTML, but with a vertical scroll bar.</p>
  
  <p>I tried to get this bar via CSS with</p>
  
  <pre><code>  &lt;style&gt;
      @media only print {
        #printableArea {
          display: block;
          width: 100%;
          height: 100%;
          overflow: visible;
        }
      }
    &lt;/style&gt;
  </code></pre>
  
  <p>But without success!</p>
  
  <p>That is, <strong>how</strong> do I print the HTML + text?</p>
  
  <p>PS: Text is inserted into a div via include.</p>
  
  <p>My HTML structure is</p>
  
  <pre><code>  &lt;style&gt;
      @media only print {
        #printableArea {
          display: block;
          width: 100%;
          height: 100%;
          overflow: visible;
        }
      }
    &lt;/style&gt;
  
    &lt;div class="row"&gt;
      &lt;button onclick="printDiv('printableArea')"&gt;Download&lt;/button&gt;
      &lt;div class="col-sm-10 col-sm-offset-2 col-md-10 col-md-offset-1 main" id="printableArea"&gt;
        &lt;div&gt;
          &lt;!-- button --&gt;
          &lt;h1&gt;Title&lt;/h1&gt;
          &lt;h2&gt;Subtitle&lt;/h2&gt;
          &lt;hr&gt;
        &lt;/div&gt;
          &lt;div class="col-md-10 col-md-offset-1"&gt;
            &lt;!-- graphic --&gt;
            &lt;canvas id="MyChart" width="350" height="150"&gt;&lt;/canvas&gt;
            &lt;hr&gt;
            &lt;div&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis debitis, numquam pariatur sint alias non sed repellat necessitatibus saepe sunt, magni error architecto quod mollitia corrupti animi fugit. Officia, fugit.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;&lt;!-- end row --&gt;
      &lt;/div&gt;&lt;!-- end col --&gt;
    &lt;/div&gt;&lt;!-- end row --&gt;
  </code></pre>