通过 Jquery 将 HTML Div 转换为 PDF答案

【问题标题】：Convert HTML Div to PDF via Jquery通过 Jquery 将 HTML Div 转换为 PDF
【发布时间】：2015-08-18 15:24:21
【问题描述】：

我正在尝试将我的 div 转换为 PDF。

这是我的 HTML 代码：

我可以很好地下载它，但我想在 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>

现在它在第一行显示左边的 Div，在下一行显示右边的 Div。请帮忙。

【问题讨论】：

只要我知道 jspdf 不支持任何类型的 css。因此，我不得不将它从我当前的项目中删除并返回到服务器端 pdf 生成。
Exporting PDF with jspdf not rendering CSS 的可能重复项
我们在此处显示的 css-to-pdf 中添加了一些对浮点数的支持。保留的容器高度存在一些我们需要修复的问题，但此示例显示了浮点数、css 和 PDF ...cloudformatter.com/CSS2Pdf.Demos.Float

标签： html pdf

【解决方案1】：

正如我在 cmets 中所说，jspdf 不支持 css。

但我发现这个post 有一个HtmlToCnavas 插件的参考，可以提供帮助。

【讨论】：

【解决方案2】：

据我所知，javascript 无法将带有 css 的整页 html 生成为 PDF。

如果您的项目是用 PHP 在后端编写的，dompdf 将帮助您。

注意：不支持 CSS 浮动（但正在开发中）。

【讨论】：

【解决方案3】：

<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>

【讨论】：

请编辑更多信息。不鼓励使用纯代码和“试试这个”的答案，因为它们不包含可搜索的内容，也没有解释为什么有人应该“试试这个”。我们在这里努力成为知识的资源。