Convert HTML file into PDF

Question

I am trying to convert my PHP page into PDF file. But the problem which I am facing is after getting convert into pdf the top part I am not able to view I have attached the image. And the Quality of pdf is getting blurred.

My image is :

HTML/PHP

<div id="content2" style="background: #fff;border-bottom: 10px solid #ffffff;padding: 15px;border: 1px solid #000;width: 80%;margin: 0 auto;position: relative;overflow: hidden;margin-bottom: 15px;">
  <table width="100%">
    <tr>
      <td>
        <center>
          <font size="5">
            Nikita Agrawal
          </font>
          <br> Bangalore
          <br> India, 560078
        </center>
      </td>
    </tr>
  </table>
  <br>
  <br>
  <br>
  <table width="100%">
    <tr>
      <td>
        Date:
        <?php $date=date_create($row['Payment_Date']); echo date_format($date,'d/m/Y'); ?>
      </td>
    </tr>
  </table>
  <br>
  <br>
  <br>
  <table width="100%">
    <tr>
      <td>
        To,
        <br> XYZ
      </td>
    </tr>
  </table>
  <br>
  <br>
  <br>
  <table width="100%">
    <tr>
      <td>
        <b>
                    Sub:
                </b> Declaration regarding non-requirement to be registered under the Central/ State/ Integrated /
        <br> Union Territory Goods and Services Tax Act, 2017 (Act) against supply/services provided.
      </td>
    </tr>
  </table>
  <br>
  <table width="100%">
    <tr>
      <td>
        Dear Sir/Mam,
        <br>
        <br>
        <span style="border-bottom: 1px dotted;width: 100%;display: block;"></span>
      </td>
    </tr>
    <tr>
      <td>
        <br> This refers to our discussion/communication for asking us to provide you with details of GST registrations such as GST registration number and the address registered under GST obtained by us.
      </td>
    </tr>
    <tr>
      <td>
        <br> In this regard, we hereby state that since my turnover in the state below taxable limit, we are not required to get myself registered under the ACT. My Permanent Account Number (PAN) is
        <?= $row['pan']; ?>
      </td>
    </tr>
    <tr>
      <td>
        <br> We request you to treat this communication as a declaration regarding non-requirement to be registered under the Act. In the event that GST is proposed to be recovered from me/us by the tax authorities in relation to transaction with XYZ
        on account of non-registration under GST, I/we will be liable to pay the same and it will not be paid AABSyS IT Private Limited.
      </td>
    </tr>
    <tr>
      <td>
        <br> Thanks & Regards,
      </td>
    </tr>
    <tr>
      <td>
        <br>
        <br>
        <br>
        <br> Signature
      </td>
    </tr>
    <tr>
      <td>
        Name
        <br>
        <?= $row['firstname'].' '.$row['lastname']; ?>
      </td>
    </tr>
  </table>
</div>
<button class="btn btn-info" id="cmd2">Download Token</button>

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js">
</script>
<script>
    $('#cmd2').click(function() {
        var options = {
            //'width': 800,
        };
        var pdf = new jsPDF('p', 'pt', 'a4');
        pdf.addHTML($("#content2"), -1, 220, options, function() {
            pdf.save('admit_card.pdf');
        });
    });
</script>

Answer 1

As per question you have an issue that you did not able to view top part.

I have resolved with some design changes and the most important thing pdf.addHTML(selector, left, top, options, callback) having 2nd and 3rd parameters indicate left and top spacing which earlier was set as -1, 220 and that is the main reason you did not get the proper design in pdf.

Now I have set as pdf.addHTML($("#content2"), 0, 0, options, callback); also.

PHP

<?php
$row['Payment_Date'] = date('Y-m-d');
$row['firstname'] = "Nikita";
$row['lastname'] = "Agarwal";
$row['pan'] = 'AKC230L';
?>

CSS

<style type="text/css">
    body{
        padding:0px;
        left:0px;
        top:0px;
        background-color:#ffffff;
    }
    tr{
        line-height:20px;
    }
    #content2{
        background: #fff;
        border-bottom: 10px solid #ffffff;
        padding: 15px;
        border: 1px solid #000;
        width: 80%;
        margin: auto 15px;
        position: relative;
        overflow: hidden;
        margin-bottom: 15px;
    }
    .width100{
        width:100%;
    }
    .padding20{
        padding:20px 0px;
    }
    .rowborder{
        border-bottom: 1px dotted;
        width: 100%;
        display: block;
    }
    .headerfont{
        font-size:25px;
    }
</style>

HTML

<div id="content2" style="background: #fff;border-bottom: 10px solid #ffffff;padding: 15px;border: 1px solid #000;width: 80%;margin: 0 auto;position: relative; overflow: hidden;margin-bottom: 15px;">
    <table class="width100">
        <tr>
            <td>
                <center>
                    <font size="5">
                        Nikita Agrawal
                    </font>
                    <br>
                    Bangalore
                    <br>
                    India, 560078
                </center>
            </td>
        </tr>
    </table>
    <br>
    <br>
    <br>
    <table class="width100">
        <tr>
            <td>
                Date:
                <?php $date=date_create($row['Payment_Date']); echo date_format($date,'d/m/Y'); ?>
            </td>
        </tr>
    </table>
    <br>
    <br>
    <br>
    <table class="width100">
        <tr>
            <td>
                To,
                <br>
                XYZ
            </td>
        </tr>
    </table>
    <br>
    <br>
    <br>
    <table class="width100">
        <tr>
            <td>
                <b>
                    Sub:
                </b>
                Declaration regarding non-requirement to be registered under the Central/ State/ Integrated /
                <br>
                Union Territory Goods and Services Tax Act, 2017 (Act) against supply/services provided.
            </td>
        </tr>
    </table>
    <br>
    <table class="width100">
        <tr>
            <td>
                Dear Sir/Mam,
                <br>
                <br>
                <span style="border-bottom: 1px dotted;width: 100%;display: block;"></span>
            </td>
        </tr>
        <tr>
            <td>
                <br>
                This refers to our discussion/communication for asking us to provide you with details of GST registrations such as GST registration number and the address registered under GST obtained by us.
            </td>
        </tr>
        <tr>
            <td>
                <br>
                In this regard, we hereby state that since my turnover in the state below taxable limit, we are not required to get myself registered under the ACT. My Permanent Account Number (PAN) is
                <?= $row['pan']; ?>
            </td>
        </tr>
        <tr>
            <td>
                <br>
                We request you to treat this communication as a declaration regarding non-requirement to be registered under the Act. In the event that GST is proposed to be recovered from me/us by the tax authorities in relation to transaction with XYZ
                on account of non-registration under GST, I/we will be liable to pay the same and it will not be paid AABSyS IT Private Limited.
            </td>
        </tr>
        <tr>
            <td>
                <br>
                Thanks & Regards,
            </td>
        </tr>
        <tr>
            <td>
                <br>
                <br>
                <br>
                <br>
                Signature
            </td>
        </tr>
        <tr>
            <td>
                Name
                <br>
                <?= $row['firstname'].' '.$row['lastname']; ?>
            </td>
        </tr>
    </table>
</div>
<br/>
<button class="btn btn-info" id="cmd2">Download Token</button>

Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://cdn.rawgit.com/MrRio/jsPDF/master/libs/html2pdf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js">
</script>
<script>
    $('#cmd2').click(function() {
        var options = {};
        var pdf = new jsPDF('p', 'pt', 'a4');
        pdf.addHTML($("#content2"), 0, 0, options, function() {
            pdf.save('admit_card.pdf');
        });
    });
</script>