title: generating pdf from Html in React using html2canvas and jspdf
body: <p>I have successfully generated the pdf from html2canvas and jspdf in React. But the problem is the image rendered in the pdf is stretched. Please let me know what the best option to do this kind of work is. Is there any possibility of rendering the HTML directly to pdf without using html2canvas? 
  Below are my screenshots
  <a href="https://i.stack.imgur.com/Zjf09.png" rel="noreferrer">Output Screenshot</a> and 
  <a href="https://i.stack.imgur.com/8z2ns.png" rel="noreferrer">pdf's screenshot</a></p>
  
  <p>Below is my code</p>
  
  <pre><code>import React, { Component } from 'react';
  import * as jsPDF from 'jspdf';
  import * as html2canvas from 'html2canvas';
  
  
  class Invoice extends Component {
  
  handlePdf = () =&gt; {
      const input = document.getElementById('page');
  
      html2canvas(input)
          .then((canvas) =&gt; {
              const imgData = canvas.toDataURL('image/png');
              const pdf = new jsPDF('p', 'px', 'a4');
              var width = pdf.internal.pageSize.getWidth();
              var height = pdf.internal.pageSize.getHeight();
  
              pdf.addImage(imgData, 'JPEG', 0, 0, width, height);
              pdf.save("test.pdf");
          });
  };
  
  render() {
  
      const hrStyle = {
          border: '5px solid rgb(23, 162, 184)'
      };
  
      const subtotal = [0, ...this.props.inputs.totals];
      const add = (a, b) =&gt; a + b;
      const sum = subtotal.reduce(add);
  
      const tax = sum * 0.1;
      const total = sum + tax;
  
      return (
          &lt;React.Fragment&gt;
              &lt;div className="col-12 col-lg-6" id="page"&gt;
                  &lt;div className="container-fluid bg-info text-white"&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="col text-left m-2"&gt;
                              &lt;p&gt;Your Company Name&lt;/p&gt;
                              &lt;h2&gt;Invoice&lt;/h2&gt;
                          &lt;/div&gt;
                          &lt;div className="col text-right"&gt;
                              &lt;p&gt;22 Yusen St&lt;/p&gt;&lt;br /&gt;
                              &lt;p&gt;borburn&lt;/p&gt;&lt;br /&gt;
                              &lt;p&gt;WSN&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="container-fluid"&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="col-4"&gt;
                              &lt;h5&gt;Billed To&lt;/h5&gt;
                              &lt;p&gt;{this.props.inputs.company}&lt;/p&gt;
                              &lt;p&gt;{this.props.inputs.address}&lt;/p&gt;
                              &lt;p&gt;{this.props.inputs.zip}&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div className="col-4"&gt;
                              &lt;div&gt;
                                  &lt;h5&gt;Invoive number&lt;/h5&gt;
                                  &lt;p&gt;Za{Math.floor((Math.random() * 100) + 1)}&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div&gt;
                                  &lt;h5&gt;Date&lt;/h5&gt;
                                  &lt;p&gt;{this.props.inputs.date}&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="col-4"&gt;
                              &lt;div&gt;
                                  &lt;h5&gt;Invoice Totals&lt;/h5&gt;
                                  &lt;p&gt;${total}&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;hr style={hrStyle} /&gt;
                  &lt;div className="Invoices"&gt;
                      &lt;table className="table"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Description&lt;/th&gt;
                                  &lt;th&gt;Unit Price&lt;/th&gt;
                                  &lt;th&gt;Quantity&lt;/th&gt;
                                  &lt;th&gt;Total&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              {this.props.inputs.invoices.map((invoice, index) =&gt; {
                                  return (
                                      &lt;tr key={index}&gt;
                                          &lt;td&gt;{invoice.description}&lt;/td&gt;
                                          &lt;td&gt;{invoice.unit}&lt;/td&gt;
                                          &lt;td&gt;{invoice.quantity}&lt;/td&gt;
                                          &lt;td&gt;{invoice.quantity * invoice.unit}&lt;/td&gt;
                                      &lt;/tr&gt;
                                  )
                              })
                              }
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
                  &lt;hr /&gt;
                  &lt;div className="col-12 text-right" &gt;
                      &lt;h5 className="m-2"&gt;
                          Subtotal&lt;span className="m-2"&gt;${sum}&lt;/span&gt;
                      &lt;/h5 &gt;
                      &lt;p&gt;Tax(10%)&lt;span className="m-2"&gt;${tax.toFixed(2)}&lt;/span&gt;&lt;/p&gt;
                      &lt;h2&gt;Total&lt;span className="m-2"&gt;${total}&lt;/span&gt;&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;button onClick={this.handlePdf} className="btn btn-primary btn-lg mx-auto"&gt;Generate PDF&lt;/button&gt;
  
          &lt;/React.Fragment &gt;
      );
  }
  }
  
  export default Invoice;
  </code></pre>