[英]how to use html2canvas and jspdf to export to pdf in a proper and simple way
我目前正在开发一个学校管理软件,该软件通常需要导出包含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');
});
我为你制作了一个 jsfiddle。
<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 有问题。 但是,Andrew 通过从 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');
}
});
});
改变这一行:
var doc = new jsPDF('L', 'px', [w, h]);
var doc = new jsPDF('L', 'pt', [w, h]);
固定尺寸。
当您添加“useCORS:true”时,这有效。 抓取谷歌地图,因为它在屏幕上呈现并将其放入 pdf
function create_pdf() {
return html2canvas($('#map'), {
useCORS: true,
background: "#ffffff",
onrendered: function(canvas) {
var myImage = canvas.toDataURL("image/jpeg,1.0");
// Adjust width and height
var imgWidth = (canvas.width * 60) / 240;
var imgHeight = (canvas.height * 70) / 240;
// jspdf changes
var pdf = new jsPDF('p', 'mm', 'a4');
pdf.addImage(myImage, 'png', 15, 2, imgWidth, imgHeight); // 2: 19
pdf.save(`Budgeting ${$('.pdf-title').text()}.pdf`);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.