将HTML文件转换为PDF

时间:2018-02-16 05:52:58

标签: javascript php html pdf

我正在尝试将我的PHP页面转换为PDF文件。但是我面临的问题是在转换成pdf之后,我无法查看我已经附加图像的顶部。而且pdf的质量越来越模糊。

我的形象是:

SCREENSHOT OF PDF

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>

1 个答案:

答案 0 :(得分:1)

根据问题,您遇到了一个无法查看顶部的问题。

我已经解决了一些设计更改,最重要的是pdf.addHTML(selector, left, top, options, callback)有第二个和第三个参数表示左边和上边距,之前设置为-1,220,这是你没有得到的主要原因适当的设计pdf。

现在我也设置为pdf.addHTML($("#content2"), 0, 0, options, callback);

  

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>