我使用Acrobat打开了一个印刷表格，并使所有元素与在线提交配合工作。然后我将整个文档转换为HTML并在我的网站上实施，效果很好。您可以编辑和填写所有字段，原始的印刷表格样式与CSS保持不变。
现在应该可以保存填写好的表格为pdf并下载，但我正在努力寻找一种方法来实现这一点。
我尝试使用以下代码（html2canvas）。我将表格的4个页面用class =“print-wrap page1”等进行包装。 当我现在点击下载pdf时，它创建的pdf形状不正确，不包含任何填写的信息，而是静态表格。
我认为这是因为html2canvas不使用表格的CSS，也不使用您在页面上填写的数据。
所以也许这个解决方案不适合我的需求，我没有其他解决方案。 此外，表格过于复杂，无法编辑每个字段，如果有解决方案，那么基本上自动截取页面到pdf或打印到pdf按钮就可以了。
我需要的是：一种捕获CSS样式表格的方式（或捕获整个页面作为屏幕截图），包括所有输入的数据（这是最重要的）。然后在单击时将其转换为pdf。
我尝试使用以下代码（html2canvas）。我将表格的4个页面用class =“print-wrap page1”等进行包装。 当我现在点击下载pdf时，它创建的pdf形状不正确，不包含任何填写的信息，而是静态表格。
我认为这是因为html2canvas不使用表格的CSS，也不使用您在页面上填写的数据。
所以也许这个解决方案不适合我的需求，我没有其他解决方案。 此外，表格过于复杂，无法编辑每个字段，如果有解决方案，那么基本上自动截取页面到pdf或打印到pdf按钮就可以了。
我需要的是：一种捕获CSS样式表格的方式（或捕获整个页面作为屏幕截图），包括所有输入的数据（这是最重要的）。然后在单击时将其转换为pdf。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script>
$(document).ready(function() {
//Generate PDF
function generatePDF() {
window.scrollTo(0, 0);
var pdf = new jsPDF('p', 'pt', [580, 630]);
html2canvas($(".page1")[0], {
onrendered: function(canvas) {
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
//ctx.scale(2, 2);
var imgData = canvas.toDataURL("image/png", 1.0);
var width = canvas.width;
var height = canvas.clientHeight;
pdf.addImage(imgData, 'PNG', 20, 20, (width - 10), (height));
}
});
html2canvas($(".page2")[0], {
allowTaint: true,
onrendered: function(canvas) {
var ctx = canvas.getContext('2d');
ctx.scale(2, 2);
var imgData = canvas.toDataURL("image/png", 1.0);
var htmlH = $(".page2").height() + 100;
var width = canvas.width;
var height = canvas.clientHeight;
pdf.addPage(580, htmlH);
pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height));
}
});
html2canvas($(".page3")[0], {
allowTaint: true,
onrendered: function(canvas) {
var ctx = canvas.getContext('2d');
ctx.scale(2, 2);
var imgData = canvas.toDataURL("image/png", 1.0);
var htmlH = $(".page2").height() + 100;
var width = canvas.width;
var height = canvas.clientHeight;
pdf.addPage(580, htmlH);
pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height));
}
});
html2canvas($(".page4")[0], {
allowTaint: true,
onrendered: function(canvas) {
var ctx = canvas.getContext('2d');
ctx.scale(2, 2);
var imgData = canvas.toDataURL("image/png", 1.0);
var htmlH = $(".page2").height() + 100;
var width = canvas.width;
var height = canvas.clientHeight;
pdf.addPage(580, htmlH);
pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height));
}
});
setTimeout(function() {
//jsPDF code to save file
//Generate BLOB object
var blob = pdf.output("blob");
//Getting URL of blob object
var blobURL = URL.createObjectURL(blob);
//Showing PDF generated in iFrame element
//Setting download link
var downloadLink = document.getElementById('pdf-download-link');
downloadLink.href = blobURL;
}, 0);
};
generatePDF();
});
</script>
<style>.print-wrap { width: 500px; }</style>