javascript - 以 PDF 格式下载 HTML 表格

Question

我花了过去 3 天试图解决这个问题，但一直得到相同的结果......

我有一个使用 JavaScript 完成的 HTML 表格。

HTML

<div id="tb_container">
    <table id="tb_Logbook" class="table table-striped" onload="LoadPilotLogBook()">
        <thead>
            <tr>
              <th><center>DATE</center></th>
              <th colspan="2">DEPARTURE</th>
              <th colspan="2">ARRIVAL</th>
              <th colspan="2">AIRCRAFT</th>
              <th colspan="2">SINGLE PILOT FLIGHT TIME</th>
              <th>MULTI-PILOT</th>
              <th>TOTAL TIME</th>
              <th>NAME OF</th>
              <th colspan="2">LANDINGS</th>
              <th>APPROACH</th>
              <th colspan="2">OPERATIONAL CONDITION TIME</th>
              <th colspan="4">PILOT FUNCTION TIME</th>
              <th colspan="3">FLIGHT SIM TRAINING</th>
              <th>REMARKS AND</th>
              <th colspan="2">ACTIONS</th>
            </tr>
            <tr>
              <th><center>dd/mm/yyyy</center></th>
              <th>Place</th>
              <th>Time</th>
              <th>Place</th>
              <th>Time</th>
              <th>Model</th>
              <th>Registration</th>
              <th>SE</th>
              <th>ME</th>
              <th>FLIGHT TIME</th>
              <th>OF FLIGHT</th>
              <th>Pilot in command</th>
              <th>Day</th>
              <th>Night</th>
              <th>IFR</th>
              <th>Night</th>
              <th>IFR</th>
              <th>PIC</th>
              <th>Co-Pilot</th>
              <th>Dual</th>
              <th>Instructor</th>
              <th>Date</th>
              <th>Type</th>
              <th>Time</th>
              <th>ENDORSMENTS</th>
              <th>EDIT</th>
              <th>SUPPR</th>
            </tr>
        </thead>
        <tbody>
            //AutoGenerated via JS 
        </tbody>
        </table>
    </div>

我已经包含了所有这些文件：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/dist/jspdf.plugin.autotable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.10/jspdf.plugin.autotable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

JavaScript

    window.html2canvas = html2canvas
var doc = new jsPDF('l', 'mm', [297, 210]);
title = "Your Logbook",
source = $('#tb_container')[0];

specialElementHandlers = {

    '#bypassme': function (element, renderer) {

        return true
    }
};



margins = {
    top: 100,
    bottom: 10,
    left: 10,
    right: 10
};

$('#cmd').click(function () {

doc.addHTML($('#tb_Logbook')[0], function () {
    title,
    source,
    margins.left, 
    margins.top, { 
        'width': margins.width, 
        'elementHandlers': specialElementHandlers
    },
 doc.save('LOGBOOK_' + userLastName + '_' + userFirstName + '.pdf');
 });


});

当我单击按钮导出为 PDF 时，我得到这个文件：

我现在真的不知道如何处理这个问题。

谢谢你的帮助！

score 2 · Accepted Answer

您还可以使用 jsPDF html PlugIn 替代addHtml(). 我找不到 CDN，html2canvas 1.0.0-alpha.12所以我无法在这里制作代码片段。以下代码对我有用。并且pdf内容可搜索且更清晰。不过，您可能需要调整页面的大小。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
    crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script><!-- html2canvas 1.0.0-alpha.11 or higher version is needed -->
<script>
    function download() {
        let pdf = new jsPDF('l', 'pt', [1920, 640]);
        pdf.html(document.getElementById('tb_Logbook'), {
            callback: function (pdf) {
                pdf.save('test.pdf');
            }
        });
    }
</script>

score 0 · Accepted Answer

您只是缺少background-color:white. 我认为问题在于 html2canvas 为您提供了一个透明的 png 图像，而 JsPDF 会将其转换为 jpg。所以所有透明像素都转换为黑色。

简而言之，尝试将 body、html、tablebackground-color设置为white.

window.html2canvas = html2canvas
var doc = new jsPDF('l', 'mm', [297, 210]);
title = "Your Logbook",
source = $('#tb_container')[0];

specialElementHandlers = {

    '#bypassme': function (element, renderer) {

        return true
    }
};



margins = {
    top: 100,
    bottom: 10,
    left: 10,
    right: 10
};

$('#cmd').click(function () {

  doc.addHTML($('#tb_Logbook')[0], function () {
      title,
      source,
      margins.left, 
      margins.top, { 
          'width': margins.width, 
          'elementHandlers': specialElementHandlers
      },
   doc.save('LOGBOOK_.pdf');
   });
 
 });

*, html, body, table{
  background-color:white;
  width:100%;
}

#cmd{
  border:1px solid blue;
  color:white;
  background-color:lightblue;
  padding:10px;
  border-radius:5px;
  width:200px;
  text-align:center;
  cursor:pointer;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/dist/jspdf.plugin.autotable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.10/jspdf.plugin.autotable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<div class="cmd" id="cmd">Click to Export</div>
<div id="tb_container">
    <table id="tb_Logbook" class="table table-striped" onload="LoadPilotLogBook()">
        <thead>
            <tr>
              <th><center>DATE</center></th>
              <th colspan="2">DEPARTURE</th>
              <th colspan="2">ARRIVAL</th>
              <th colspan="2">AIRCRAFT</th>
              <th colspan="2">SINGLE PILOT FLIGHT TIME</th>
              <th>MULTI-PILOT</th>
              <th>TOTAL TIME</th>
              <th>NAME OF</th>
              <th colspan="2">LANDINGS</th>
              <th>APPROACH</th>
              <th colspan="2">OPERATIONAL CONDITION TIME</th>
              <th colspan="4">PILOT FUNCTION TIME</th>
              <th colspan="3">FLIGHT SIM TRAINING</th>
              <th>REMARKS AND</th>
              <th colspan="2">ACTIONS</th>
            </tr>
            <tr>
              <th><center>dd/mm/yyyy</center></th>
              <th>Place</th>
              <th>Time</th>
              <th>Place</th>
              <th>Time</th>
              <th>Model</th>
              <th>Registration</th>
              <th>SE</th>
              <th>ME</th>
              <th>FLIGHT TIME</th>
              <th>OF FLIGHT</th>
              <th>Pilot in command</th>
              <th>Day</th>
              <th>Night</th>
              <th>IFR</th>
              <th>Night</th>
              <th>IFR</th>
              <th>PIC</th>
              <th>Co-Pilot</th>
              <th>Dual</th>
              <th>Instructor</th>
              <th>Date</th>
              <th>Type</th>
              <th>Time</th>
              <th>ENDORSMENTS</th>
              <th>EDIT</th>
              <th>SUPPR</th>
            </tr>
        </thead>
        <tbody>
            //AutoGenerated via JS 
        </tbody>
        </table>
    </div>

你也可以在这里测试你的这个答案

javascript - 以 PDF 格式下载 HTML 表格

2 回答 2

Related

Reference