Question

$('#generate').click(function() {
  var pdf = new jsPDF('p', 'pt', 'a4');
  pdf.addHTML($('.pg-section').get(0), function() {
    pdf.save('Test.pdf');
  });
});

.pg-section {
  background: white;
}
.pg-section h3 {
  padding: 5px;
  background: #808080;
  text-align: center;
  font-size: 14px;
  color: #FFF;
  font-weight: bold;
  margin-bottom: 10px;
}

.pg-tbl {
  margin: 15px 0;
  border-collapse: collapse;
  border: 2px solid blue;
  width: 100%;
}

.pg-tbl th {
  background: #ccc;
  text-align: center;
}

.pg-tbl th,
.pg-tbl td {
  border: 2px solid blue;
  padding: 5px 4px;
  font-size: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="generate">Generate PDF</button>
<div class="pg-section">
  <h3 class="h3">User Information</h3>
  <table id="tbl1" class="pg-tbl">
    <thead>
      <tr>
        <th>User ID</th>
        <th>First</th>
        <th>Last</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="user_id">5672</td>
        <td id="first">John</td>
        <td id="last">Kean</td>
        <td id="age">29</td>
      </tr>
    </tbody>
  </table>

  <h3 class="h3">Building Information</h3>
  <table id="tbl9" class="pg-tbl">
    <thead>
      <tr>
        <th rowspan="2">Total</th>
        <th colspan="2">Range</th>
      </tr>
      <tr>
        <th>High</th>
        <th>Low</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="total">45</td>
        <td id="low">13</td>
        <td id="high">5</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.0/jspdf.debug.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

在上面的示例中，我使用jspdf.debug.js和html2canvas.min.js将div容器导出为PDF文件。生成文件后，我注意到pdf看起来很模糊。我想知道如何解决该问题？有没有办法使pdf看起来像原始的html？

Answer 1

输入dpi：200或400，您将获得清晰的图像

Answer 2

使用addHtml时遇到相同的问题。事实证明，addHtml根据jsPDF的documentation被弃用了。我最后只是遵循他们提供的link，而是使用pdf.html()。这是我用来将转换后的pdf作为电子邮件附件发送的代码。您只能在自己的情况下使用pdf.save()。附言我使用了html2canvas 1.0.0-alpha.12

function emailHtml() {
    let pdf = new jsPDF('p', 'pt', 'a4');
    pdf.html(document.body, {
        callback: function (pdf) {
            let obj = {};
            obj.pdfContent = pdf.output('datauristring');
            var jsonData = JSON.stringify(obj);
            $.ajax({
                url: '/api/jspdf/html2pdf',
                type: 'POST',
                contentType: 'application/json',
                data: jsonData
            });
        }
    });
}

为什么html2canvas产生模糊的pdf文件？

2 个答案: