Jspdf: Special char not recognized and text illegible in a PDF generated with jspdf and html2canvas

Created on 4 Aug 2020 · 15Comments · Source: MrRio/jsPDF

Hi,

I have a problem with the file dist/jspdf.umd.js.
Following the advice given for solving the issue #2766, I'm using the file dist/jspdf.umd.js in replacement of jspdf.js.

But I obtain problems with special characters. They are not recognized even if the meta data type is correctly defined in my page. I don't have this problem before when I used the file jspdf.js from the src folder.

For instance: in my html page "≥" for "greater than or equal to": the character should be "≥50%" and appears like that:

Furthermore, since I'm using the file dist/jspdf.umd.js the text is illegible: the letters overlap:
text_issue

Here my code:
`

<head> 
        <meta charset="utf-8"> 
        <title>Template 01</title>      
        <link id="BootstrapCSS" rel="stylesheet" type="text/css" href="bootstrap.min.css">      

</head>

<body id="toPDF">

        <div id="result">
            <div id="target">
                <div class="container-fluid">           
                    <p id="generateButton" style="display: none;"><button type="button" class="btn btn-primary btn-lg" onclick="download()">Generate PDF</button></p>
                    <div id="content">
                        <table id="table01" class="table table-bordered table_border">                      
                            ...
                        </table>
                        <table id="table02" class="table table-bordered table_border">                      
                            ...
                        </table>

                        ...
                    </div>
                </div>
            </div>
        </div>

</body>

<script src="jspdf.umd.js"></script>
<script src="jquery-2.1.4.min.js"></script>
<script src="html2canvas.min.js"></script>
<script>
    function download() {
        let pdf = new jspdf.jsPDF('p', 'pt', 'a4')
        let srcwidth = document.getElementById('toPDF').scrollWidth;

        pdf.html(document.getElementById('toPDF'), {
            html2canvas: {
                scale: 595.26 / srcwidth, //595.26 is the width of A4
                scrollY: 0
            },
            filename: 'jspdf',
            x: 0,
            y: 0,
            callback: function () {
                window.open(pdf.output('bloburl'));
            }
        });
    }
</script>

Could you please help me please to solve this issue ? I don't know if I should use another version of the jspdf version for solving this error and the error (and in the same time the error #2766).

Kind Regards,

Source

amadese

Most helpful comment

I finally found out that this is indeed a regression to 1.5.3 and is due to the options.flags parameter being ignored by the text function. As a consequence, the defaults were wrong. I created a PR, which should fix the issue with the next release.

HackbrettXXX on 15 Jan 2021

👍2

All 15 comments

The overlapping issue might be related to #2294.
The font issue seems to be this: #2807.

HackbrettXXX on 10 Aug 2020

The overlapping issue might be related to #2294.
The font issue seems to be this: #2807.

Dear @HackbrettXXX Which version of the library (which file from the "dist" folder) I have to use for solving these both issues ?

Furthermore I'm not sure that the overlappping issue is solved. I'm using the file jspdf.debug.js (present in the past in the folder dist) and the text was correctly displayed without defining a font in the function .html().

amadese on 11 Aug 2020

You can use any of them, but in your case the "umd" variants are probably best.

Ok, if you tested it, then the overlapping issue is not resolved yet. I'm reopening the other issue.

HackbrettXXX on 11 Aug 2020

You can use any of them, but in your case the "umd" variants are probably best.

Ok, if you tested it, then the overlapping issue is not resolved yet. I'm reopening the other issue.

Thanks @HackbrettXXX ,

I have tried to implement the font with this code:

                let pdf = new jspdf.jsPDF('p', 'pt', 'a4'); // the name of the global variable has changed -> const { jsPDF } = window.jspdf
                let srcwidth = document.getElementById('content').scrollWidth;

                console.log(pdf.getFontList());
                pdf.setFont("Times");
                pdf.setFontType("bold");

                pdf.html(document.getElementById('content'), {
                    html2canvas: {
                        scale: 575.26 / srcwidth, //595.26 is the width of A4 - 10 px in less for the margins rgight and left
                        scrollY: 0
                    },
                    filename: 'jspdf',
                    x: 10,
                    y: 0,
                    callback: function () {
                        //window.open(pdf.output('bloburl'));
                        pdf.save('test');
                    }
                });

But as the html is already implemented with it owner fonts, the issue of special characters is still present.
The fonts used in my html page are general ("Times New Roman",Helvetica,Arial,sans-serif.) and I would like to keep that.
Could you please help me. I don't know how to solve that with the library.

amadese on 12 Aug 2020

Please share a complete test case (including the html code), otherwise I can't reproduce it.

HackbrettXXX on 12 Aug 2020

Please share a complete test case (including the html code), otherwise I can't reproduce it.

Dear @HackbrettXXX ,

Please find below the complete example that I use:

https://jsfiddle.net/amadese57/17npbu4y/

I'm using the version 1.5.3 of jspdf in order to avoid issues with special chars. But overlaping text issue is still present.

amadese on 12 Aug 2020

@HackbrettXXX Hi Did you have time to test my example about overlaping and special char issue?

Could you please help me that ?

Thanks in advance for your time

amadese on 28 Aug 2020

I'm really busy again ATM. I hope I will find the time to look into this in the next weeks. Sorry about that. If this is not fast enough, you may always have a look at the sources yourself or find someone else to do it ;)

HackbrettXXX on 28 Aug 2020

We got the same issue with any text with "special" characters such as "é" or even the typesetter's apostrophe. As others have pointed out, this used to work in 1.5.3.

MaximeMorin on 24 Nov 2020

👍1

That's in fact really odd. @MaximeMorin could you maybe dig into that?

HackbrettXXX on 27 Nov 2020

@HackbrettXXX Do you have anything in mind? We were at version 1.5.3, upgraded, issue started to happen, downgraded and it worked.

MaximeMorin on 27 Nov 2020

👍1

@MaximeMorin not really. I currently don't have the time to look into this myself.

HackbrettXXX on 3 Dec 2020

I have the same issue with jsPDF 2.2.0 and a number formatted to locale with thousand separator:

renders in PDF to

Can I use an older version of jsPDF to avoid the problem?