Javascript 如何使用html2canvas和jspdf以正确且简单的方式导出为pdf
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26481645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to use html2canvas and jspdf to export to pdf in a proper and simple way
提问by Tobi Owolawi
I am currently working on a school management software that usually requires exporting of html contents that contains data tablesand div tag.
我目前正在开发一个学校管理软件，该软件通常需要导出包含data tables和.html 的 html 内容div tag。
I have tried all possible means to write a code that will be able to export my html data in a good way, with css preferably. After checking some question and answers here, I tried using spdf, but no luck.
我已经尝试了所有可能的方法来编写能够以一种好的方式导出我的 html 数据的代码，最好使用 css。在此处检查了一些问题和答案后，我尝试使用 spdf，但没有成功。
It keeps destroying my table alignment, then I read about html2canvasbut to implement it with jspdfwas my problem, i would like to capture the content if a div tag with html2canvasthen send the canvas to jspdfto export the canvas as pdf.
它不断破坏我的表格对齐方式，然后我阅读了有关html2canvas但实现它jspdf是我的问题，如果一个 div 标签，我想捕获内容，html2canvas然后将画布发送到jspdf以将画布导出为 pdf。
Here is my code below:
这是我的代码如下：
<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>
here is the js code
这是js代码
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.addHTML($('#ElementYouWantToConvertToPdf')[0], function () {
pdf.save('Test.pdf');
});
回答by Razan Paul
I have made a jsfiddle for you.
我为你制作了一个 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/
jsfiddle：http: //jsfiddle.net/rpaul/p4s5k59s/5/
Tested in Chrome38, IE11 and Firefox 33. Seems to have issues with Safari. However, Andrew got it working in Safari 8 on Mac OSx by switching to JPEG from PNG. For details, see his comment below.
在 Chrome38、IE11 和 Firefox 33 中测试。似乎与 Safari 有问题。但是，Andrew 通过从 PNG 切换到 JPEG 使其在 Mac OSx 上的 Safari 8 中工作。有关详细信息，请参阅下面的评论。
回答by Mark Salvania
This one shows how to print only selected element on the page with dpi/resolutionadjustments
这个展示了如何在页面上只打印选定的元素并进行dpi/resolution调整
HTML:
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:
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:
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/
jsfiddle：https://jsfiddle.net/marksalvania/dum8bfco/
