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

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
            });
        }
    });
}