IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Inscrit en
    Juin 2008
    Messages
    102
    Détails du profil
    Informations forums :
    Inscription : Juin 2008
    Messages : 102
    Par défaut Caractères spéciaux non reconnus dans un fichier PDF créé avec JSPDF et HTML2CANVAS
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 ">" (`&gt;`) 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

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 210
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 210
    Par défaut
    Bonjour,
    J'ai une page html contenant des tableaux et des caractères spéciaux comme `&ge;` 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 > ?

  3. #3
    Membre confirmé
    Inscrit en
    Juin 2008
    Messages
    102
    Détails du profil
    Informations forums :
    Inscription : Juin 2008
    Messages : 102
    Par défaut
    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

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 210
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 210
    Par défaut
    Il te faut passer par une fonction du type html_entity_decode de PHP, par exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

Discussions similaires

  1. [XL-2010] Ouverture de fichiers avec des caractères spéciaux non reconnus
    Par Invité dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 23/03/2018, 18h45
  2. caractéres spéciaux non reconnus
    Par ilameq dans le forum Entrée/Sortie
    Réponses: 10
    Dernier message: 22/11/2011, 17h03
  3. caractères accentués non reconnus dans une JTable
    Par nf1624 dans le forum Composants
    Réponses: 6
    Dernier message: 21/08/2009, 16h11
  4. Réponses: 6
    Dernier message: 24/04/2009, 13h34
  5. [.net] Caractères spéciaux non reconnus
    Par akrodev dans le forum MFC
    Réponses: 3
    Dernier message: 04/05/2006, 22h08

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo