Html To PDF with chart and table using jquery

Html To PDF with chart and table using j query

by Bhavdip Talaviya

HTML

<html>
<head>
<style>



#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>
</head>

<body>
  <input type="button" id="btnDownload" value="download" /> Please click on this button to get chart with html content on pdf
  <div class="white-back row" style="padding: 1.5rem;" id="tvgMainCnt">
    <div id="top-content">
      <div>
        <div>
          <img src="https://miro.medium.com/max/1198/1*n-Q2XBz6CFC1MgMpdab4xQ.jpeg" style="height: 100px;" />
        </div>
        </div>
      <div style="margin-top: 1rem;">
        <p style="color:green">
          Dear members,
        </p>
      </div>
      <div>
        Added some fake text: Please ignore this is test text, Please ignore this is test text, Please ignore this is test text.
      </div>
      <br />
       <table id="customers" class="table table-striped" width="100%">
       
        <thead width="100%" width="100%">
            <tr class='warning' >
                <th>Country</th>
                <th>Population</th>
                <th>Date</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody width="100%">
            <tr>
                <td>Chinna</td>
                <td>1,363,480,000</td>
                <td>March 24, 2014</td>
                <td>19.1</td>
            </tr>
            <tr>
                <td>India</td>
                <td>1,241,900,000</td>
                <td>March 24, 2014</td>
                <td>17.4</td>
            </tr>
            <tr>
                <td>United States</td>
                <td>317,746,000</td>
                <td>March 24, 2014</td>
       ...