I need to generate a pdf report from a div HTML

Asked

Viewed 1,120 times

-1

When mine is generated, the document appears as an image and not with text, as it should. How to solve this problem?

<script type='text/javascript'>
$(document).ready(function() {
		$('#botaoImprimir').click(function() {
			var doc = new jsPDF('portrait', 'pt', 'a4');
			doc.addHTML($('#divImagemPDF'), function() {

				doc.save("RelatórioExplainDB2.pdf");

			});

		});

	})
</script> 
	<!----------------------------->
	<!--------DIV RELATÓRIO-------->
	<!----------------------------->
	<div class="divForm" style="width: 100%;">
		<div class="divCentralForm" id="divCentralForm" >
			<div class="divImagemPDF" id="divImagemPDF"
				style="background-color: white;width: 100%;">
				<p class="titleForm">PARECER TÉCNICO</p>
				<hr class="hrInicio">

				<div class="divRelatorioQualidade" id="relatorioQualidade"
					style="background-color: #e6e6e6; height: 500px; width: 100%;">
					<table border="1" class="tblRelatorioQualidade">
						<tr>
							<td colspan="2" style="text-align: center; font-weight: bolder">RELATÓRIODE QUALIDE DE CÓDIGO DE DB2 STORED PROCEDURE</td>
						</tr>
						<tr>
							<td><b>SYSTEM DB2</b></td>
							<td>${ambiente}</td>
						</tr>
						<tr>
							<td><b>SCHEMA</b></td>
							<td>${schema}</td>
						</tr>
						<tr>
							<td><B>ELEMENTO</B></td>
							<td>${nomeProcedure}</td>
						</tr>
					</table>

					<div class="valorRecomendado">
						Maior TOTAL_COST do elemento = ${maiorTotalCost} <br> Valor
						recomendado = 1.0 <br> <br> Maior PROCMS do elemento =
						${maiorPROCMS} <br> Valor recomendado = 1 <br>
					</div>
					<BR>
					<textarea class='areaTextParecerTecnico'
						id="areaTextParecerTecnico" rows="7" maxlength="1200"
						style="width: 75%; height: 250px;">
 TOTAL_COST: 
 ACCESSTYPE: 
 INDEXONLY: 
 PROCMS: </textarea>

					<!-- <div class="divParecer" id="divParecer" contenteditable="true">
						TOTAL_COST<BR> ACCESSTYPE<BR> INDEXONLY<BR> PROCMS<BR>
					</div> -->
					<BR>
				</div>

				<hr class="hrFinal">
			</div>

			<input class="btn btn-default botaoImprimir botaoForm" type="button"
				id="botaoImprimir" value="GERAR PDF" /> <input
				class="btn btn-default botaoFechar botaoForm" type="button"
				value="FECHAR" onclick="hideForm()" />
		</div>
	</div>

javascript html5 jspdf

2 answers

0

To work as text it is necessary to realize that you will not have printed the page with the same formatting and colors, this is only possible being an image. an alternative is to use the plugin autotable which allows you to control the layout and print as text, which already makes it searchable.

See an example here: example

function printHTML() {

  var doc = new jsPDF('p', 'pt');

  var res = doc.autoTableHtmlToJson(document.getElementById("table-content"));

  var header = function() {
  	
    var header1 = document.getElementById("header1").innerHTML;

    doc.setFontSize(13);
    doc.setFontType("bold");
		doc.text(header1 , 20, 40);
    
    doc.setDrawColor(255,255,255,255);
    doc.setLineWidth(2);
    doc.line(20, 56, 555, 56); 
  };

  var options = {
  	theme: "plain",  // 'striped', 'grid' or 'plain'
    beforePageContent: header,
    margin: {
      top: 80,
      left: 20
    },
    headerStyles: {
    	font: "helvetica",
      textColor: 0,
      lineWidth: 0.5,
      halign: 'center', 
    	valign: 'middle'
    },
    styles: {
      cellPadding: 3,
    	fontSize: 10,
      font: "helvetica",
      lineWidth: 0
    }
  };

  doc.autoTable(res.columns, res.data, options);
	
  doc.save("table.pdf");
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.1.0/jspdf.plugin.autotable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
</head>
<body>

<p></p>
<button onclick="printHTML();">PDF</button>
<p></p>

<div id ='header1'>PARECER TÉCNICO</div>

<table id="table-content" border="1">
  <tr>
    <td colspan="2" style="text-align: center; font-weight: bolder">RELATÓRIODE QUALIDE</td>
  </tr>
  <tr>
    <td><b>SYSTEM DB2</b></td>
    <td>${ambiente}</td>
  </tr>
  <tr>
    <td><b>SCHEMA</b></td>
    <td>${schema}</td>
  </tr>
  <tr>
    <td><B>ELEMENTO</B></td>
    <td>${nomeProcedure}</td>
  </tr>
</table>
</body>
</html>

0

From what I understand you need the generated PDF to be Searchable, however the addHTML provided by the class only gives you a photo of the area you specified, making it impossible to select text, apparently there is still no option to do this in the jsPDF class, based on my previous experiences with pdf I recommend using the mPDF class, simple and intuitive it allows you to generate Searchable PDF.

  • vlw brother, I’ll try here !!

  • nothing, if solved your problem please mark the answer as accepted

  • So man, I tried here and did not solve. I researched about mPDF and saw that it is more used in PHP, being my "back" is in java. I do not know if you have a way to use it in java, if you know, please point out an example.

Browser other questions tagged javascript html5 jspdf

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