通过 Jquery 将 HTML Div 转换为 PDF
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30636677/
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
Convert HTML Div to PDF via Jquery
提问by Rey Norbert Besmonte
Im trying to convert my div to PDF.
我正在尝试将我的 div 转换为 PDF。
this is my HTML code:
这是我的 HTML 代码：
I can download it just fine but I want to show in the PDF file the Div float:left is aligned with Div Float:right.
我可以很好地下载它，但我想在 PDF 文件中显示 Div float:left 与 Div Float:right 对齐。
<script lang="javascript" type="text/javascript">
function run()
{
var pdf = new jsPDF('p', 'pt', 'letter'),
source = $('#content')[0],
margins = {
top: 40,
bottom: 40,
left: 40,
right: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top,
{
'width': margins.width
},
function (dispose) {
pdf.save('Test.pdf');
},
margins
);
};
</script type = "text/javascript"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html2pdf</title>
<body>
<div id="content" style = "width: 100px">
<div id = "name" style="float:right">
<div id ="rey"> Rey </div>
<div id ="norbert"> norbert </div>
</div>
<div id = "age" style="float:left; width:50px">age</div>
</div>
<div id = "button" style ="margin-top:50px">
<button id="cmd" onclick ="run()">generate PDF</button>
</div>
<script src="C:\Users\besmonte\Desktop\for Practice\jspdf.debug.js"></script>
<script src="C:\Users\besmonte\Desktop\for Practice\jquery.min.js"></script>
</body>
</html>Right now it show the Div left in the first row, and the Div right in the next row. Help Please.
现在它在第一行显示左边的 Div，在下一行显示右边的 Div。请帮忙。
采纳答案by Maksym Stepanenko
as I stated in the comments jspdf does not support css as is.
正如我在评论中所说的，jspdf 不支持 css。
But I found this postwhich has a reference for HtmlToCnavasplugin which could help.
但是我发现这篇文章有一个HtmlToCnavas插件的参考，可以提供帮助。
回答by Patrick Nguyen
回答by Jorge Domingo Leon Mendez
<script lang="javascript" type="text/javascript">
function run()
{
var pdf = new jsPDF('p', 'pt', 'letter'),
source = $('#content')[0],
margins = {
top: 40,
bottom: 40,
left: 40,
right: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top,
{
'width': margins.width
},
function (dispose) {
pdf.save('Test.pdf');
},
margins
);
};
</script type = "text/javascript"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html2pdf</title>
<body>
<div id="content" style = "width: 100px">
<div id = "name" style="float:right">
<div id ="rey"> Rey </div>
<div id ="norbert"> norbert </div>
</div>
<div id = "age" style="float:left; width:50px">age</div>
</div>
<div id = "button" style ="margin-top:50px">
<button id="cmd" onclick ="run()">generate PDF</button>
</div>
<script src="C:\Users\besmonte\Desktop\for Practice\jspdf.debug.js"></script>
<script src="C:\Users\besmonte\Desktop\for Practice\jquery.min.js"></script>
</body>
</html>