title: Generate PDF from web app
body: <p>I need to generate a PDF from the current screen in my webapp. Some kind of screenshot, but I'm facing serious difficulties.</p>
  
  <p>The main problem is that the view contains a grid made with jQuery Gridster; and some "widgets" contain complex elements like tables, highcharts, etc.</p>
  
  <p>So plugins like <a href="https://parall.ax/products/jspdf" rel="nofollow noreferrer">jsPDF</a> or <a href="https://html2canvas.hertzen.com/" rel="nofollow noreferrer">html2canvas</a> can't render my page in a prorper PDF. They always generate it blank.</p>
  
  <p>This is how the page looks like. You can/move resize each element:
  (Sorry for the CIA style, but there's business data in there)</p>
  
  <p><img src="https://i.imgur.com/9xqvtSz.png" alt="img"></p>
  
  <p>Some ideas I came across but don't work are:</p>
  
  <ul>
  <li>Using browser print-to-pdf feature programatically. (can't)</li>
  <li>Use <a href="http://phantomjs.org/" rel="nofollow noreferrer">phantomjs</a>. (but page state matters, so...)</li>
  </ul>
  
  <p>I believe a solution to this poroblem may be widely adopted by anyone trying to generate a PDF of img from current screen in a web app. Quite an unresolved problem.</p>
  
  <p>It's ok if only works on Google Chrome.</p>
  
  <p>Many thanks.</p>
  
  <h3>EDIT:</h3>
  
  <p>One posible solution might be to find a way to represent the current layout status with an object and save it with and id.</p>
  
  <p>Then retrieve that object via url param with the id and apply the stored layout to the inital page.</p>
  
  <p>This way I might able to take a screenshot with <a href="http://phantomjs.org/" rel="nofollow noreferrer">phatomjs</a>, but it seems quite complex to me. Any alternative?</p>