Question

我试图将我的div转换为PDF。

这是我的HTML代码：

我可以下载它很好，但我想在PDF文件中显示Div float：left与Div Float对齐：右。

＆＃13;

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

＆＃13;

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

＆＃13;

现在它显示Div在第一行中离开，Div在下一行中显示。请帮忙。

Answer 1

正如我在评论中所述，jspdf不支持css。

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

Answer 2

据我所知，javascript无法生成带有css到PDF的完整页面HTML。

如果您的项目由PHP在后端编写，dompdf会对您有帮助。

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

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

通过Jquery将HTML Div转换为PDF

3 个答案: