Tob*_*awi 15 html javascript css jquery jspdf
我目前正在研究一种学校管理软件,通常需要导出包含data tables和的html内容div tag.
我已经尝试了所有可能的方法来编写一个能够以良好的方式导出我的html数据的代码,最好使用css.在这里检查了一些问题和答案后,我尝试使用spdf,但没有运气.
它一直在破坏我的表格对齐,然后我读到了html2canvas但是要实现它jspdf是我的问题,我想捕获内容,如果div标签html2canvas然后发送画布以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');
});
Raz*_*aul 20
我为你做了个傻瓜.
<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');
}
});
});
jsfiddle：https ://jsfiddle.net/marksalvania/dum8bfco/