jsPDF include css

Asked

Viewed 4,040 times

2

How do I save this DIV, with css formatting, if it is easier to do with table, also can, because what I need is only show this DIV with value inside.

It will be generated side by side.

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#btGerarPDF').click(function () {
    doc.fromHTML($('#etiqueta').html(), 0, 0, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('teste.pdf');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>     
     
     
     <div id="etiqueta" style="width: 89mm;  height: 36mm;  border: 1px solid black;  font-size: 3em;  text-align: center; float:left; margin-right: 10px">
         <div style="padding-top: 33px;">102030</div>
     </div>
     
     <div id="etiqueta" style="width: 89mm;  height: 36mm;  border: 1px solid black;  font-size: 3em;  text-align: center; float:left; margin-right: 10px">
         <div style="padding-top: 33px;">102030</div>
     </div>



<div id="editor"></div>
<button id="btGerarPDF">gerar PDF</button>

javascript html html5 script jspdf

  • Hello friend, I’ve used this library, but not with css inline. Have you tried using @media print { } in an archive .css separate? You have more information about this type of media query here: http://www.joshuawinn.com/css-print-media-query/

  • @Leandrosimões Good morning. I think in PDF because of the control of the margins. I will print labels two columns using matrix printer, and the sheet is narrower than A4.

1 answer

2

jsPDF does not support reading the user’s CSS style as described in the documentation. The only alternative I started and used is to use html2Canvas.

The 

$(document).ready(function(){

	//pdf 	
	$("#pdfDownloader").click(function(){

        html2canvas(document.getElementById("printDiv"), {
            onrendered: function(canvas) {
								
                var imgData = canvas.toDataURL('image/jpeg');
				
                //console.log('Image URL: ' + imgData);

                var doc = new jsPDF('p','mm','a4');
                
                doc.setFontSize(10);
																
                doc.text(10, 15, 'Filter section will be printed where.')
                
                doc.addImage(imgData, 'jpeg', 10, 20);
                
                doc.save('sample.pdf');
            }
        });

	});
});
.xpto{
    width:600px;
    height:1000px;
    background:white;
    padding:5px;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <link rel="stylesheet" type="text/css" href="app.css" />
    <script src="app.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>
<body>

<button type="button" id="pdfDownloader">Download</button>
<div id="printDiv" class="xpto">
  <p>
    <table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>
</p>
</div>

<body>
</html>

Browser other questions tagged javascript html html5 script jspdf

You are not signed in. Login or sign up in order to post.