代码之家 › 专栏 › 技术社区 › espresso_coffee

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

html2canvas jspdf javascript

espresso_coffee · 技术社区 · 5 年前

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

2 回复 | 直到 5 年前

MKJ 5 年前

放入dpi:200或400,你会得到清晰的图像

Weihui Guo vmax1909 5 年前

我也有同样的问题 addHtml . 原来, AdvHTML 根据 jsPDF 的 documentation . 我只是跟着 link 他们提供和使用 pdf.html() 相反。这是我用来将转换后的pdf作为电子邮件附件发送的代码。你可以使用 pdf.save() 对你来说。P.S.I使用 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
            });
        }
    });
}