为什么html2canvas产生模糊的pdf文件? [英] Why html2canvas produced blurry pdf file?

问题描述

$('#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?

In example above I use jspdf.debug.js and html2canvas.min.js to export div container to PDF file. After file is generated I noticed that pdf looks blurry. I'm wondering how I can fix that? Is there a way to make the pdf look like the original html?

推荐答案

我在使用addHtml时遇到了同样的问题.事实证明，根据 jsPDF 的文档.我最后只是按照他们提供的链接进行操作，使用pdf.html().这是我用来将转换后的pdf作为电子邮件附件发送的代码.您只能在您的情况下使用pdf.save(). P.S.我使用了 html2canvas 1.0.0-alpha.12

I had the same problem using addHtml. Turns out, addHtml is deprecated according to jsPDF's documentation. I ended up just following the link they provided and using pdf.html(). Here is the code that I used to send the converted pdf as an email attachment. You can just use pdf.save() in your case. P.S. I used 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文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！