How to export an HTML DIV to PDF by CSS?

Navigation
6

Does anyone have any code that can export a DIV to PDF rendering all the CSS of this DIV? Should I do this in backEnd (Java) or frontEnd (JavaScript)? If anyone can help, I appreciate it!!

EDIT: Thanks for the reply Gabriel Rodrigues, but this scheme did not work the way I need it

And the original page with css was like this:

    
asked by anonymous 24.03.2016 / 12:24

2 answers

8

Update

Based on the following response , I adapted the script and created a extended function of JQuery to make it easy to create PDF's based on HTML . The script proves to create multiple pages if the size of the image exceeds the limit of sheet a4, in addition to maintaining CSS of the page.

Also available in gist . 

(function($){
    $.fn.createPdf = function(parametros) {
        
        var config = {              
            'fileName':'html-to-pdf'
        };
        
        if (parametros){
            $.extend(config, parametros);
        }                            

        var quotes = document.getElementById($(this).attr('id'));

        html2canvas(quotes, {
            onrendered: function(canvas) {
                var pdf = new jsPDF('p', 'pt', 'letter');

                for (var i = 0; i <= quotes.clientHeight/980; i++) {
                    var srcImg  = canvas;
                    var sX      = 0;
                    var sY      = 980*i;
                    var sWidth  = 900;
                    var sHeight = 980;
                    var dX      = 0;
                    var dY      = 0;
                    var dWidth  = 900;
                    var dHeight = 980;

                    window.onePageCanvas = document.createElement("canvas");
                    onePageCanvas.setAttribute('width', 900);
                    onePageCanvas.setAttribute('height', 980);
                    var ctx = onePageCanvas.getContext('2d');
                    ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

                    var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);
                    var width         = onePageCanvas.width;
                    var height        = onePageCanvas.clientHeight;

                    if (i > 0) {
                        pdf.addPage(612, 791);
                    }

                    pdf.setPage(i+1);
                    pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));
                }

                pdf.save(config.fileName);
            }
        });
    };
})(jQuery);
 

function createPDF() {
    $('#renderPDF').createPdf({
        'fileName' : 'testePDF'
    });
}
<!-- import -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/canvas2image.min.js"></script>

<!-- import -->


<button type="button" class="btn btn-success" onclick="createPDF();">pdf</button>
 
<div id="renderPDF" class="container">
	<div class="jumbotron">
		<h1>Bootstrap Tutorial</h1>
		<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
	</div>
	<div id="customers">
		<table id="tab_customers" class="table table-striped">
			<thead>
				<tr class='btn-danger'>
					<th>#</th>
					<th>Population</th>
					<th>Date</th>
					<th>Age</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>1,363,480,000</td>
					<td>March 24, 2014</td>
					<td>19.1</td>
				</tr>
				<tr>
					<td>2</td>
					<td>1,241,900,000</td>
					<td>March 24, 2014</td>
					<td>17.4</td>
				</tr>
				<tr>
					<td>3</td>
					<td>317,746,000</td>
					<td>March 24, 2014</td>
					<td>4.44</td>
				</tr>
				<tr>
					<td>4</td>
					<td>249,866,000</td>
					<td>July 1, 2013</td>
					<td>3.49</td>
				</tr>
				<tr>
					<td>5</td>
					<td>201,032,714</td>
					<td>July 1, 2013</td>
					<td>2.81</td>
				</tr>
				<tr>
					<td>6</td>
					<td>1,363,480,000</td>
					<td>March 24, 2014</td>
					<td>19.1</td>
				</tr>
				<tr>
					<td>7</td>
					<td>1,241,900,000</td>
					<td>March 24, 2014</td>
					<td>17.4</td>
				</tr>
				<tr>
					<td>8</td>
					<td>317,746,000</td>
					<td>March 24, 2014</td>
					<td>4.44</td>
				</tr>
				<tr>
					<td>9</td>
					<td>249,866,000</td>
					<td>July 1, 2013</td>
					<td>3.49</td>
				</tr>
				<tr>
					<td>10</td>
					<td>201,032,714</td>
					<td>July 1, 2013</td>
					<td>2.81</td>
				</tr>
				<tr>
					<td>11</td>
					<td>1,363,480,000</td>
					<td>March 24, 2014</td>
					<td>19.1</td>
				</tr>
				<tr>
					<td>12</td>
					<td>1,241,900,000</td>
					<td>March 24, 2014</td>
					<td>17.4</td>
				</tr>
				<tr>
					<td>13</td>
					<td>317,746,000</td>
					<td>March 24, 2014</td>
					<td>4.44</td>
				</tr>
				<tr>
					<td>14</td>
					<td>249,866,000</td>
					<td>July 1, 2013</td>
					<td>3.49</td>
				</tr>
				<tr>
					<td>15</td>
					<td>201,032,714</td>
					<td>July 1, 2013</td>
					<td>2.81</td>
				</tr>
				<tr>
					<td>16</td>
					<td>1,363,480,000</td>
					<td>March 24, 2014</td>
					<td>19.1</td>
				</tr>
				<tr>
					<td>17</td>
					<td>1,241,900,000</td>
					<td>March 24, 2014</td>
					<td>17.4</td>
				</tr>
				<tr>
					<td>18</td>
					<td>317,746,000</td>
					<td>March 24, 2014</td>
					<td>4.44</td>
				</tr>
				<tr>
					<td>19</td>
					<td>249,866,000</td>
					<td>July 1, 2013</td>
					<td>3.49</td>
				</tr>
				<tr>
					<td>20</td>
					<td>201,032,714</td>
					<td>July 1, 2013</td>
					<td>2.81</td>
				</tr>
				<tr>
					<td>21</td>
					<td>1,363,480,000</td>
					<td>March 24, 2014</td>
					<td>19.1</td>
				</tr>
				<tr>
					<td>22</td>
					<td>1,241,900,000</td>
					<td>March 24, 2014</td>
					<td>17.4</td>
				</tr>
				<tr>
					<td>23</td>
					<td>317,746,000</td>
					<td>March 24, 2014</td>
					<td>4.44</td>
				</tr>
				<tr>
					<td>24</td>
					<td>249,866,000</td>
					<td>July 1, 2013</td>
					<td>3.49</td>
				</tr>
				<tr>
					<td>25</td>
					<td>201,032,714</td>
					<td>July 1, 2013</td>
					<td>2.81</td>
				</tr>
				<tr>
					<td>26</td>
					<td>1,363,480,000</td>
					<td>March 24, 2014</td>
					<td>19.1</td>
				</tr>
				<tr>
					<td>27</td>
					<td>1,241,900,000</td>
					<td>March 24, 2014</td>
					<td>17.4</td>
				</tr>
				<tr>
					<td>28</td>
					<td>317,746,000</td>
					<td>March 24, 2014</td>
					<td>4.44</td>
				</tr>
				<tr>
					<td>29</td>
					<td>249,866,000</td>
					<td>July 1, 2013</td>
					<td>3.49</td>
				</tr>
				<tr>
					<td>30</td>
					<td>201,032,714</td>
					<td>July 1, 2013</td>
					<td>2.81</td>
				</tr>
				<tr>
					<td>31</td>
					<td>1,363,480,000</td>
					<td>March 24, 2014</td>
					<td>19.1</td>
				</tr>
				<tr>
					<td>32</td>
					<td>1,241,900,000</td>
					<td>March 24, 2014</td>
					<td>17.4</td>
				</tr>
				<tr>
					<td>33</td>
					<td>317,746,000</td>
					<td>March 24, 2014</td>
					<td>4.44</td>
				</tr>
				<tr>
					<td>34</td>
					<td>249,866,000</td>
					<td>July 1, 2013</td>
					<td>3.49</td>
				</tr>
				<tr>
					<td>35</td>
					<td>201,032,714</td>
					<td>July 1, 2013</td>
					<td>2.81</td>
				</tr>
				<tr>
					<td>36</td>
					<td>1,363,480,000</td>
					<td>March 24, 2014</td>
					<td>19.1</td>
				</tr>
				<tr>
					<td>37</td>
					<td>1,241,900,000</td>
					<td>March 24, 2014</td>
					<td>17.4</td>
				</tr>
				<tr>
					<td>38</td>
					<td>317,746,000</td>
					<td>March 24, 2014</td>
					<td>4.44</td>
				</tr>
				<tr>
					<td>39</td>
					<td>249,866,000</td>
					<td>July 1, 2013</td>
					<td>3.49</td>
				</tr>
				<tr>
					<td>40</td>
					<td>201,032,714</td>
					<td>July 1, 2013</td>
					<td>2.81</td>
				</tr>
				<tr>
					<td>41</td>
					<td>1,363,480,000</td>
					<td>March 24, 2014</td>
					<td>19.1</td>
				</tr>
				<tr>
					<td>42</td>
					<td>1,241,900,000</td>
					<td>March 24, 2014</td>
					<td>17.4</td>
				</tr>
				<tr>
					<td>43</td>
					<td>317,746,000</td>
					<td>March 24, 2014</td>
					<td>4.44</td>
				</tr>
				<tr>
					<td>44</td>
					<td>249,866,000</td>
					<td>July 1, 2013</td>
					<td>3.49</td>
				</tr>
				<tr>
					<td>45</td>
					<td>201,032,714</td>
					<td>July 1, 2013</td>
					<td>2.81</td>
				</tr>
				<tr>
					<td>46</td>
					<td>1,363,480,000</td>
					<td>March 24, 2014</td>
					<td>19.1</td>
				</tr>
				<tr>
					<td>47</td>
					<td>1,241,900,000</td>
					<td>March 24, 2014</td>
					<td>17.4</td>
				</tr>
				<tr>
					<td>48</td>
					<td>317,746,000</td>
					<td>March 24, 2014</td>
					<td>4.44</td>
				</tr>
				<tr>
					<td>49</td>
					<td>249,866,000</td>
					<td>July 1, 2013</td>
					<td>3.49</td>
				</tr>
				<tr>
					<td>50</td>
					<td>201,032,714</td>
					<td>July 1, 2013</td>
					<td>2.81</td>
				</tr>
				<tr>
					<td>51</td>
					<td>1,363,480,000</td>
					<td>March 24, 2014</td>
					<td>19.1</td>
				</tr>
				<tr>
					<td>52</td>
					<td>1,241,900,000</td>
					<td>March 24, 2014</td>
					<td>17.4</td>
				</tr>
				<tr>
					<td>53</td>
					<td>317,746,000</td>
					<td>March 24, 2014</td>
					<td>4.44</td>
				</tr>
				<tr>
					<td>54</td>
					<td>249,866,000</td>
					<td>July 1, 2013</td>
					<td>3.49</td>
				</tr>
				<tr>
					<td>55</td>
					<td>201,032,714</td>
					<td>July 1, 2013</td>
					<td>2.81</td>
				</tr>
				<tr>
					<td>56</td>
					<td>1,363,480,000</td>
					<td>March 24, 2014</td>
					<td>19.1</td>
				</tr>
				<tr>
					<td>57</td>
					<td>1,241,900,000</td>
					<td>March 24, 2014</td>
					<td>17.4</td>
				</tr>
				<tr>
					<td>58</td>
					<td>317,746,000</td>
					<td>March 24, 2014</td>
					<td>4.44</td>
				</tr>
				<tr>
					<td>59</td>
					<td>249,866,000</td>
					<td>July 1, 2013</td>
					<td>3.49</td>
				</tr>
				<tr>
					<td>60</td>
					<td>201,032,714</td>
					<td>July 1, 2013</td>
					<td>2.81</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

24.03.2016 / 20:22
3

You can do a good solution by joining jsPDF and html2canvas

Example: 

$('#button').click(function() {
  var doc = new jsPDF('landscape', 'pt', 'a4');
  doc.addHTML($('#conteudo'), function() {
    doc.save("teste.pdf");
  });
});
body {
  text-align: center;
}
div {
  color: #605B5B;
  background-color: white;
  padding: 50px;
  margin: 10px;
}
button {
  background-color: #44c767;
  -moz-border-radius: 28px;
  -webkit-border-radius: 28px;
  border-radius: 28px;
  border: 1px solid #18ab29;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 17px;
  padding: 16px 31px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #2f6627;
}
button:active {
  position: relative;
  top: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><scriptsrc="https://cdn.rawgit.com/MrRio/jsPDF/master/dist/jspdf.min.js"></script>
<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js"></script><divid="conteudo">
  <h1>Silvio Santos Ipsum!</h1>
  <p>boca sujuam... sem vergonhuamm. Mah é a porta da esperançaam. O Raul Gil é gayam! ... Maa O Ah Ae! Ih Ih! O Raul Gil é gayamm! Mah é a porta da esperançaam.</p>
  <p>
    Patríciaaammmm... Luiz Ricardouaaammmmmm. Ha haeeee. Hi hi. É namoro ou amizadeemm? Ma vale dérreaisam? Eu só acreditoammmm.... Vendoammmm. Mah você não consegue né Moisés? Você não consegueam. Um, dois três, quatro, PIM, entendeuam? Ma vejam só, vejam
    só.
  </p>
</div>

<button id="button">Baixar</button>

See working at jsfiddle

    
24.03.2016 / 13:19
Entity Framework WITH (NOLOCK) Is there a limit on the size of the data transmitted via POST?