我需要在PDF格式的HTML页面中保存一个表。尽你所能，我在这个表中有30列。见图片
我做了一个javascript函数(使用HTML2PDF库)，该按钮"Genera pdf";下载PDF格式的表格。有一个javascript函数:
function generatePDF(){
element = document.getElementById("table-bordered");
var opt = {
filename: 'myreport.pdf',
image: { type: 'jpeg', quality: 0.98 },
jsPDF: { unit: 'in', format: 'A4', orientation: 'landscape' }
};
htmltopdf().from(element).set(opt).save();
}
问题是PDF的布局不好(不在页面中心，列数只有27)
PDF文件
我如何修改我的代码，因为它工作得很好?否则，有另一种可能性，其他html2pdf做这项工作?谢谢你
您可以使用js pdf。我的要求差不多完成了。我希望它对你有用。
$(document).ready(function () {
var form = $('.form'),
cache_width = form.width(),
a4 = [595.28, 841.89]; // for a4 size paper width and height
$('#create_pdf').on('click', function () {
$('body').scrollTop(0);
createPDF();
});
function createPDF() {
getCanvas().then(function (canvas) {
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('Invoice');
form.width(cache_width);
});
}
function getCanvas() {
form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(form, {
imageTimeout: 2000,
removeContainer: true
});
}
});table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
background-color: #111;
color: white;
}
tr:nth-child(odd) {
background-color: #dddddd;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF</title>
</head>
<body>
<h1>How To Convert HTML To PDF Using JavaScript</h1>
<form class="form">
<table>
<tbody>
<tr>
<th>Company Name</th>
<th>Employee Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dell</td>
<td>Maria</td>
<td>Germany</td>
</tr>
<tr>
<td>Asus</td>
<td>Francisco</td>
<td>Mexico</td>
</tr>
<tr>
<td>Apple</td>
<td>Roland</td>
<td>Austria</td>
</tr>
<tr>
<td>HP</td>
<td>Helen</td>
<td>UK</td>
</tr>
<tr>
<td>Lenovo</td>
<td>Yoshi</td>
<td>Canada</td>
</tr>
</tbody>
</table><br>
<input type="button" id="create_pdf" value="Generate PDF">
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
</html><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
margin: 0px auto;
}
#htmlContent{
text-align: center;
}
td, th, button {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
button {
border: 1px solid black;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<div id="htmlContent">
<h2 style="color: #0094ff">Hello</h2>
<h3>About this Code:</h3>
<p>Demo of how to convert and Download HTML page to PDF file with CSS, using JavaScript and jQuery.</p>
<table>
<tbody>
<tr>
<th>Person</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>John</td>
<td>+2345678910</td>
<td>Germany</td>
</tr>
<tr>
<td>Jacob</td>
<td>+1234567890</td>
<td>Mexico</td>
</tr>
<tr>
<td>Eleven</td>
<td>+91234567802</td>
<td>Austria</td>
</tr>
</tbody>
</table>
</div>
<div id="editor"></div>
<center>
<p>
<button id="generatePDF">generate PDF</button>
</p>
Ref:<a href="https://phpcoder.tech">phpcoder.tech</a>
</center>
Js代码
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
//margins.left, // x coord margins.top, { // y coord
$('#generatePDF').click(function () {
doc.fromHTML($('#htmlContent').html(), 15, 15, {
'width': 700,
'elementHandlers': specialElementHandlers
});
doc.save('sample_file.pdf');
});