javascript - 将 HTML 文件转换为 PDF

Question

我正在尝试将我的 PHP 页面转换为 PDF 文件。但我面临的问题是在转换为 pdf 后，我无法查看我已附加的图像的顶部部分。 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>

Answer 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>