Error JSPDF does not correctly export the images

1

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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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.

    
asked by Lombarda Arda 03.05.2017 в 09:24
source

0 answers