2

Como faço para salvar essa DIV, com a formatação css, se for mais fácil fazer com table, tambem pode, pois o que preciso é somente mostrar essa DIV com valor dentro.

Será gerado lado a lado.

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>

2
  • Olá amigo, já utilizei esta biblioteca, porém não com css inline. Já experimentou utilizar @media print { } em um arquivo .css separado? Tem mais informações sobre este tipo de media query aqui neste link: joshuawinn.com/css-print-media-query Commented 11/08/2017 às 0:15
  • @LeandroSimões Bom dia. Penso no PDF por causa do controle das margens. Irei imprimir etiquetas duas colunas usando impressora matricial, e a folha é mais estreita que A4.
    – Tiago
    Commented 11/08/2017 às 12:32

1 Resposta 1

2

O jsPDF não suporta a leitura do estilo das CSS do utilizador, conforme descrito na documentação. A unica alternativa que começo e usei é a utilização do 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>
    <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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .