我目前正在研究一种学校管理软件，通常需要导出包含data tables和div tag的html内容。
我已经尝试了所有可能的方法来编写一个能够以良好的方式导出我的html数据的代码，最好使用css。在这里检查了一些问题和答案后，我尝试使用spdf，但没有运气。
它一直在破坏我的表格对齐，然后我读了关于html2canvas但是用jspdf实现它是我的问题，我想捕获内容如果带有html2canvas的div标签然后将画布发送到jspdf以将画布导出为pdf。
这是我的代码如下：
<script src="assets/js/pdfconvert/jspdf.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.from_html.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.split_text_to_size.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.standard_fonts_metrics.js"> </script>
<script src="assets/js/pdfconvert/jspdf.plugin.addhtml.js"></script>
<script src="assets/js/pdfconvert/filesaver.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.cell.js"></script>
<script src="assets/js/pdfconvert/html2canvas.js"></script>
<script src="assets/js/pdfconvert/jspdf.plugin.addimage.js"></script>
这是js代码
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () {
pdf.save('Test.pdf');
});
我为你做了个傻瓜。
<canvas id="canvas" width="480" height="320"></canvas>
<button id="download">Download Pdf</button>
'
html2canvas($("#canvas"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
的jsfiddle：http://jsfiddle.net/rpaul/p4s5k59s/5/
在Chrome38，IE11和Firefox 33中测试过。似乎有Safari问题。但是，安德鲁通过从PNG切换到JPEG，让它在Mac OSx上的Safari 8中运行。有关详细信息，请参阅下面的评论。
这个展示了如何使用dpi/resolution调整仅打印页面上的选定元素
HTML：
<html>
<body>
<header>This is the header</header>
<div id="content">
This is the element you only want to capture
</div>
<button id="print">Download Pdf</button>
<footer>This is the footer</footer>
</body>
</html>
CSS：
body {
background: beige;
}
header {
background: red;
}
footer {
background: blue;
}
#content {
background: yellow;
width: 70%;
height: 100px;
margin: 50px auto;
border: 1px solid orange;
padding: 20px;
}
JS：
$('#print').click(function() {
var w = document.getElementById("content").offsetWidth;
var h = document.getElementById("content").offsetHeight;
html2canvas(document.getElementById("content"), {
dpi: 300, // Set to 300 DPI
scale: 3, // Adjusts your resolution
onrendered: function(canvas) {
var img = canvas.toDataURL("image/jpeg", 1);
var doc = new jsPDF('L', 'px', [w, h]);
doc.addImage(img, 'JPEG', 0, 0, w, h);
doc.save('sample-file.pdf');
}
});
});