jsPDF include css

Question

jsPDF include css

Navigation

#1 by (2 votes)

1

How do I save this DIV, with css formatting, if it's easier to do with table, so can I, so what I need is to just 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><divid="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

asked by anonymous 11.08.2017 / 02:02

1 answer

Using require, where to use this tag? PHP and json how to print?

score 2 · Answer 1

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

O

$(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><scriptsrc="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><buttontype="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>