web-dev-qa-db-fra.com

Convertir HTML Div en PDF via Jquery

Je suis en train de convertir mon div en PDF.

c'est mon code HTML:

Je peux le télécharger très bien, mais je veux montrer dans le fichier PDF le flottant Div: left est aligné sur 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>

En ce moment, il montre que la div est à gauche dans la première rangée et que la div est à droite dans la rangée suivante. Aidez-moi, s'il vous plaît. 

htmlpdf
7
Rey Norbert Besmonte

comme je l'ai dit dans les commentaires, jspdf ne supporte pas css tel quel.

Mais j'ai trouvé ce post qui a une référence pour HtmlToCnavas plugin qui pourrait aider.

0
Maksym Stepanenko

Comme je le sais, javascript ne peut pas générer une page HTML complète avec CSS au format PDF.

Si votre projet écrit par PHP en back-end, dompdf vous aidera.

Avis: CSS float n'est pas supporté (mais est en cours de réalisation).

0
Patrick Nguyen

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

0
Jorge Domingo Leon Mendez