时间戳

首页 > 解决方案 > 为什么html2canvas产生模糊的pdf文件？

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

问题描述

$('#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.jsandhtml2canvas.min.js将 div 容器导出到 PDF 文件。生成文件后，我注意到 pdf 看起来很模糊。我想知道我该如何解决这个问题？有没有办法让 pdf 看起来像原始的 html？

标签： javascriptjspdfhtml2canvas

解决方案

我在使用时遇到了同样的问题addHtml。事实证明，addHtml根据jsPDF的文档已弃用。我最终只是按照他们提供的链接并使用pdf.html(). 这是我用来将转换后的 pdf 作为电子邮件附件发送的代码。你可以pdf.save()在你的情况下使用。PS我用过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
            });
        }
    });
}

推荐阅读