title: Generating a pdf that preserves styling of the HTML page with jsPDF
body: <p>I'm trying to create a button that will start the automatic download of a PDF of the page as it looks with the sass styling.  However, everything I try ends up with the styling messed up.  </p>
  
  <p>Here is the page (this is a testing site with several different content types)</p>
  
  <p><a href="https://i.stack.imgur.com/DXi0i.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DXi0i.png" alt="http://gobrandgotests.wpengine.com/preview-pdf/"></a></p>
  
  <p>But the PDF comes out looking like this:</p>
  
  <p><a href="https://i.stack.imgur.com/9lm5d.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9lm5d.png" alt="enter image description here"></a></p>
  
  <p>I'm pulling <code>jspdf.debug.js</code> and have the following HTML button+script in my page:</p>
  
  <pre><code>&lt;div id="bypass"&gt; &lt;!-- keeps button from showing in PDF --&gt;
      &lt;button id="pdf-new" style="margin: 50px;"&gt;&lt;a href="javascript:demoFromHTML()" class="button" style="color: black;"&gt;Generate PDF&lt;/a&gt;&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      function demoFromHTML() {
          var pdf = new jsPDF('p', 'pt', 'letter');
          // source can be HTML-formatted string, or a reference
          // to an actual DOM element from which the text will be scraped.
          source = $('#content')[0];
  
          // we support special element handlers. Register them with jQuery-style 
          // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
          // There is no support for any other type of selectors 
          // (class, of compound) at this time.
          specialElementHandlers = {
              // element with id of "bypass" - jQuery style selector
              '#bypass': function (element, renderer) {
                  // true = "handled elsewhere, bypass text extraction"
                  return true
              }
          };
          margins = {
              top: 80,
              bottom: 60,
              left: 40,
              width: 522
          };
          // all coords and widths are in jsPDF instance's declared units
          // 'inches' in this case
          pdf.fromHTML(
          source, // HTML string or DOM elem ref.
          margins.left, // x coord
          margins.top, { // y coord
              'width': margins.width, // max width of content on PDF
              'elementHandlers': specialElementHandlers
          },
  
          function (dispose) {
              // dispose: object with X, Y of the last line add to the PDF 
              //          this allow the insertion of new lines after html
              pdf.save('Test.pdf');
          }, margins);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I make the styling stay consistent from the html to the pdf?</p>