Caractères spéciaux non reconnus dans un fichier PDF créé avec JSPDF et HTML2CANVAS

Version imprimable

Bonjour,

J'ai une page html contenant des tableaux et des caractères spéciaux comme `≥` pour "plus grand ou égal à".
J'utilise les librairies JSPDF et HTML2CANVAS pour générer un fichier pdf à partir d'une page html.

Cela fonctionne mais certains caractères comme "≥50%" apparaissent comme cela :

Voici mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
   <!DOCTYPE html>
    <html>
 
    	<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>
 
    </html>

Les autres caractères comme ">" (`>`) est correctement affiché.
J'ai déjà ajouté le meta data type UTF8.

Je ne sais pas comment si la version de la librarie est correcte (et la dernière).

Pourriez-vous me dire comment faire résoudre le problème?

Merci d'avance

[1]: https://i.stack.imgur.com/l7H9R.png

08/08/2020, 11h27
NoSmoking

Bonjour,

Citation:

J'ai une page html contenant des tableaux et des caractères spéciaux comme `≥` pour "plus grand ou égal à".

ce n'est pas un soucis lié à l'encodage des caractères mais à l'utilisation de htmlentities.

Pourquoi ne pas utiliser directement tes caractères < et > ?
10/08/2020, 09h03
coeurdange

Merci pour ta réponse.

Tout le texte est lisible dans la page html mais le problème apparaît dans le pdf.
Le problème c'est que les données viennent d'une source de données où les données ont on été sauvegardées à partir de formulaire Sharepoint (les caractères ont été enregistrés à l'aide d'un rich text editor wysiwyg - donc avec des styles prédéfinis). J'utilise du javascript et une autre librarie js - Mustache - pour récupérer les données de Sharepoint. Peut-être devrais-je utiliser une fonction javascript au moment de la récupération des données pour avoir les données lisibles?

Le caractère '>=' n'existe pas sur mes touches (je suis obligé de mettre les 2 caractères :?
On voit également qu'en général le texte est illisible: chevauchement de caractères les uns sur les autres dans le PDF de que j'utilise jspdf.umd.js.

Si j'utilise la libraire jspdf.js je n'ai plus de problème de caractères, mais d'autres problèmes apparaissent (toujours pour le pdf: marges des tableaux incohérentes au html, comportement avec le zoom du browser différent --c'est pourquoi j'utilisais le fichier jspdf.umd.js sur recommandation de l'équipe de la librairie).
Je ne sais pas comment résoudre ça :calim2:

Il te faut passer par une fonction du type html_entity_decode de PHP, par exemple :

Code:

1
2
3
4
5
6
7
8
9
function html_entity_decode(html = "") {
  const elem = document.createElement("TEXTAREA");
  elem.innerHTML = html;
  return elem.childNodes.length ? elem.childNodes[0].nodeValue : "";
}
// test
console.log(html_entity_decode("&lt;p&gt;Ceci est un &eacute; et ç&agrave; le fait."));
// sortie
// <p>Ceci est un é et çà le fait.