Description du problème :

Initialement, le téléchargement des notes de cours historique nécessitait de télécharger chaque image individuellement, ce qui était fastidieux. Nous avons décidé de regrouper toutes les images en un seul PDF pour faciliter le téléchargement. Cependant, lors de l'utilisation du plugin jsPDF sur mobile, une erreur de cross-domain est apparue lors de l'obtention des adresses des images.

Fondements techniques de jsPDF :

1. jsPDF est une solution côté client basée sur HTML5 pour générer des documents PDF variés.
2. Installation : npm install jspdf
3. Importation : import jsPDF from "jspdf"
4. Utilisation de base :

const generatePDF = new jsPDF('p', 'pt', 'a4');
// Premier paramètre : l pour paysage, p pour portrait
// Deuxième paramètre : unité de mesure ("pt", "mm", "cm", "m", "in" ou "px")
// Troisième paramètre : par défaut "a4". Pour un format personnalisé, passer un tableau de nombres comme [595.28, 841.89]

4. Méthodes cuorantes

documentPDF.addPage() : Ajoute une nouvelle page au document PDF :

documentPDF.addPage([largeurImage,hauteurImage], 'p')//Paramètres : (taille par défaut a4, orientation : l pour paysage p pour portrait)

documentPDF.addImage() : Ajoute une image au PDF :

documentPDF.addImage(donneesImage, 'JPEG', posX, posY, largeurImg, hauteurImg)//Paramètres : (données image, format, coordonnée x de départ, coordonnée y de départ, largeur, hauteur)

documentPDF.save() : Enregistre le document PDF

documentPDF.save('NotesDeCours.pdf')

Analyse du problème de cross-domain :

Les images proviennent d'un serveur Aliyun et ont un domaine différent de celui de la page d'accès, créant ainsi un problème de cross-domain. Deux aspects clés :

1. Pourquoi les images s'affichent-elles normalement sur la page ?

L'accès direct via la balise <img> dans le DOM ne pose pas de problème, car le navigateur lui-même n'applique pas de restrictions de cross-domain. Cependant, lorsque ces images sont réutilisées dans un canvas, une erreur de cross-domain se produit.

2. Pourquoi le PC ne présente-t-il pas ce problème ?

L'environnement PC utilise le framework Electron avec un navigateur Chrome intégré où les paramètres de cross-domain sont désactivés. Le mobile utilise WebView, qui applique ces restrictions. Le problème existerait également dans un environnement Chrome standard.

Méthodes de résolution :

Ajouter l'attribut crossOrigin aux images

![]()

Lors de la génération du PDF à partir des images, créer une balise image et ajouter l'attribut crossOrigin

const imageElement = new Image();
imageElement.crossOrigin = 'anonymous';

L'ajout de l'attribut crossOrigin indique que l'image doit être demandée selon les règles CORS. Les images obtenues via CORS peuvent être réutilisées dans un canvas. Sans cet attribut, les images ne peuvent être réutilisées dans un canvas.Qu'est-ce que crossOrigin ?

Comparé à anonymous, use-credentials implique une authentification CORS. **Gestion des cas ultérieurs :**Cette méthode résout les problèmes de cross-domain pour les images nouvellement générées. Pour les images précédemment consultées par l'utilisateur, le navigateur les met en cache par défaut. Lorsque notre code JavaScript crée une nouvelle <img> pour accéder à la même image, le navigateur ne lance pas une nouvelle requête mais utilise la version en cache, qui ne contient pas les en-têtes CORS nécessaires, entraînant un rejet.**Solution :**Générer le PDF en utilisant un timestamp pour accéder directement aux ressources sur le serveur, contournant ainsi le cache du navigateur.``` const imageElement = new Image();

•    imageElement.src = source;
  
  

•    imageElement.src = `${source}?${Date.now()}`;
     imageElement.crossOrigin = 'anonymous';
  
  

Références :

https://blog.csdn.net/weixin_42333548/article/details/107630706

https://www.jianshu.com/p/8fa0fb53c183