[Javascript] Aide html2canvas & SVG

Aide html2canvas & SVG [Javascript] - Javascript/Node.js - Programmation

Marsh Posté le 29-05-2017 à 19:58:49    

Bonjour :hello:

 

J'ai perdu pas mal de temps dans le but de convertir des éléments d'une page web en image puis pdf.

 

J'utilise les lib jspdf pour l'écriture sur pdf (pas de problème avec maintenant), et html2canvas pour convertir au préalable les éléments requis du DOM en canvas, intégrés ensuite au pdf.
Pour des éléments simples, aucun souci j'ai compris le fonctionnement.

 

Sauf que après avoir crié victoire en ayant le pdf voulu sous Chrome, je teste sous FF et Edge: 2 gros problèmes.

 

1/ Un des éléments est constitué de graphs (courbes via highcharts.js), le canvas généré était illisible (quasiment tout blanc avec des bouts de texte à peine visibles).

 

2/ Un autre élément est une table avec des progress bar, dont une div ayant pour attribut " data-percent='xxx' " > sous FF et Edge, le canvas résultant contient " attr:'data' " au lieu de la valeur (OK sous Chrome).

 

Après avoir écumé les forums, j'ai partiellement réglé le problème 1, en passant par la librairie "cansvg" (conversion SVG en canvas). Ca règle parfaitement le problème pour Firefox, mais sous Edge, les courbes n'apparaissent pas (et seulement elles, le fond est OK).
Vu qu'il y a une animation et que son chargement pouvait ne pas être terminé, j'ai tenté un "defer" sur l'appel au script (placé à la suite du JS highcharts), ainsi qu'un -sale :o- setTimeout à 0 puis 10000ms pour décaler l'exécution de l'appel à ma fonction (sur un onclick), sans succès :(

 

Et pour le problème n°2, aucune piste :sweat:

 


Si par chance quelqu'un aurait déjà manipulé ces outils et aurait une piste de travail, ce serait salvateur :D

 

[:gaga jap]  [:gaga jap]  [:gaga jap]


Message édité par potemkin le 29-05-2017 à 20:03:17
Reply

Marsh Posté le 29-05-2017 à 19:58:49   

Reply

Marsh Posté le 30-05-2017 à 07:38:20    

:bounce:

Reply

Marsh Posté le 01-06-2017 à 19:40:58    

:(

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed