I am trying to export a div that inside contains tables to pdf with jspdf. The div and its content I charge with php. This is the resulting div:
<div id="test">
<table class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0" width="606" style="width:454.2pt;border-collapse:collapse;border:none;mso-border-alt:solid windowtext .5pt;
mso-yfti-tbllook:1184;mso-padding-alt:0cm 5.4pt 0cm 5.4pt">
<tbody><tr style="mso-yfti-irow:0;mso-yfti-firstrow:yes;height:3.85pt">
<td width="90" valign="top" style="width:84.0pt;border:solid windowtext 1.0pt;
mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:3.85pt">
<p class="MsoNormal">
<span style="mso-no-proof:yes">
<img width="64" height="64" id="_x0000_i1025" src="http://192.168.7.29/html/images/chico64.png">
</span><o:p></o:p>
</p>
</td>
<td width="90" valign="top" style="width:71.3pt;border:solid windowtext 1.0pt;
border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:3.85pt">
<p class="MsoNormal"><o:p> </o:p></p>
<h1>
0
<o:p></o:p></h1>
</td>
<td width="20" valign="top" style="width:15.15pt;border:none;border-right:solid windowtext 1.0pt;
mso-border-left-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
mso-border-right-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;
height:3.85pt">
<p class="MsoNormal"><span times="" new="" '=""><o:p> </o:p></span></p>
</td>
<td width="90" valign="top" style="width:84.0pt;border:solid windowtext 1.0pt;
mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:3.85pt">
<p class="MsoNormal">
<span style="mso-no-proof:yes">
<img width="64" height="64" id="_x0000_i1025" src="http://192.168.7.29/html/images/chico64.png">
</span><o:p></o:p>
</p>
</td>
<td width="90" valign="top" style="width:71.3pt;border:solid windowtext 1.0pt;
border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:3.85pt">
<p class="MsoNormal"><o:p> </o:p></p>
<h1>
1
<o:p></o:p></h1>
</td>
<td width="20" valign="top" style="width:15.15pt;border:none;border-right:solid windowtext 1.0pt;
mso-border-left-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
mso-border-right-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;
height:3.85pt">
<p class="MsoNormal"><span times="" new="" '=""><o:p> </o:p></span></p>
</td>
<td width="90" valign="top" style="width:84.0pt;border:solid windowtext 1.0pt;
mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:3.85pt">
<p class="MsoNormal">
<span style="mso-no-proof:yes">
<img width="64" height="64" id="_x0000_i1025" src="http://192.168.7.29/html/images/chico64.png">
</span><o:p></o:p>
</p>
</td>
<td width="90" valign="top" style="width:71.3pt;border:solid windowtext 1.0pt;
border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:3.85pt">
<p class="MsoNormal"><o:p> </o:p></p>
<h1>
2
<o:p></o:p></h1>
</td>
</tr>
<tr style="mso-yfti-irow:1;mso-yfti-lastrow:yes;height:3.85pt">
<td width="179" colspan="2" valign="top" style="width:155.3pt;border:solid windowtext 1.0pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
padding:0cm 5.4pt 0cm 5.4pt;height:3.85pt">
<p class="MsoNormal"><o:p>
Jorge Ernesto Fernández de las Heras Arrizabaleta </o:p></p>
</td>
<td width="20" valign="top" style="width:15.15pt;border:none;border-right:solid windowtext 1.0pt;
mso-border-left-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
mso-border-right-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;
height:3.85pt">
<p class="MsoNormal"><o:p> </o:p></p>
</td>
<td width="179" colspan="2" valign="top" style="width:155.3pt;border:solid windowtext 1.0pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
padding:0cm 5.4pt 0cm 5.4pt;height:3.85pt">
<p class="MsoNormal"><o:p>
CAMPO SAEZ DE VITERI, ARRATE </o:p></p>
</td>
<td width="20" valign="top" style="width:15.15pt;border:none;border-right:solid windowtext 1.0pt;
mso-border-left-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
mso-border-right-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;
height:3.85pt">
<p class="MsoNormal"><o:p> </o:p></p>
</td>
<td width="179" colspan="2" valign="top" style="width:155.3pt;border:solid windowtext 1.0pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
padding:0cm 5.4pt 0cm 5.4pt;height:3.85pt">
<p class="MsoNormal"><o:p>
CRESPO CARRERA, MARTIN </o:p></p>
</td>
</tr>
<tr style="mso-yfti-irow:1;mso-yfti-lastrow:yes;height:3.85pt">
<td width="179" colspan="2" valign="top" style="width:155.3pt;border:solid windowtext 1.0pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
padding:0cm 5.4pt 0cm 5.4pt;height:3.85pt">
<p class="MsoNormal"><o:p>
000532 </o:p></p>
</td>
<td width="20" valign="top" style="width:15.15pt;border:none;border-right:solid windowtext 1.0pt;
mso-border-left-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
mso-border-right-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;
height:3.85pt">
<p class="MsoNormal"><o:p> </o:p></p>
</td>
<td width="179" colspan="2" valign="top" style="width:155.3pt;border:solid windowtext 1.0pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
padding:0cm 5.4pt 0cm 5.4pt;height:3.85pt">
<p class="MsoNormal"><o:p>
000822 </o:p></p>
</td>
<td width="20" valign="top" style="width:15.15pt;border:none;border-right:solid windowtext 1.0pt;
mso-border-left-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
mso-border-right-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;
height:3.85pt">
<p class="MsoNormal"><o:p> </o:p></p>
</td>
<td width="179" colspan="2" valign="top" style="width:155.3pt;border:solid windowtext 1.0pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
padding:0cm 5.4pt 0cm 5.4pt;height:3.85pt">
<p class="MsoNormal"><o:p>
001091 </o:p></p>
</td>
</tr>
</tbody></table>
</div>
Although it is a long table it looks very simple, it has so many styles for its subsequent export to Word.
This is the script:
function creaPDF()
{
console.log($("#test").get(0));
var doc = new jsPDF('p', 'pt');
//OR
//var doc = new jsPDF();
// We'll make our own renderer to skip this editor
var specialElementHandlers = {
'#test': function(element, renderer){
return true;
}
};
doc.fromHTML($('#test').get(0), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('Test.pdf');
}
In the console.log
I recognize the div and its content. so it's not a mistake to "find" the html element by what it looks like.
When I click on the button to export to pdf, this message appears on my console.
jspdf.debug.js: 7747 jsPDF Warning: rendering issues? provide a callback to fromHTML!
This jumps in a line of the jspdf.debug
script in which it mentions some of the images:
if (typeof callback === 'function') callback(out);else if (found_images) console.error('jsPDF Warning: rendering issues? provide a callback to fromHTML!');
How is this error solved? If I do it with html2canvas.js
what would the correct code be?
Edit
From what I've been reading I have to pass the images to base64, I've done it with php before inserting them like this:
$path = "http://".$_SERVER['SERVER_NAME']."/html/images/chico64.png";
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
They are correctly in base64 and can be seen in the html but at the time of exporting, the same thing happens again.