[英]Download HTML table in PDF
在過去的 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 時,我得到了這個文件:
我現在真的不知道如何處理這個問題。
謝謝你的幫助 !
您還可以使用 jsPDFhtml PlugIn , 替代addHtml()
。 我找不到html2canvas 1.0.0-alpha.12
的 CDN,所以我無法在這里制作代碼片段。 以下代碼對我有用。 並且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>
您只是缺少background-color:white
。 我認為問題是 html2canvas 為您提供了一個透明的 png 圖像,而 JsPDF 會將其轉換為 jpg。 所以所有的透明像素都轉換為黑色。
簡而言之,嘗試將 body, html, table background-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>
你也可以在這里測試你的這個答案
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.