3
votes

PDF créé avec le marionnettiste ne montrant pas d'icônes géniales

J'ai besoin de créer un tampon PDF et de l'enregistrer dans la base de données. Je passe le DOM complet au marionnettiste et la plupart fonctionne très bien. Lorsque j'ouvre le tampon PDF créé, les styles d'amorçage sont appliqués et j'obtiens un beau PDF.

Cependant, les icônes font-awesome n'apparaîtront pas. je n'ai que deux fichiers CSS: framework.css (créé avec SASS et contenant des styles personnalisés, des styles de bootstrap et font-awesome) et print-media (contient des supports d'impression css pour masquer ou afficher des éléments comme la navigation). Voici mon code pour créer le tampon PDF:

@font-face {
    font-family: "FontAwesome";
    src: url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.eot?v=4.7.0");
    src: url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.woff?v=4.7.0") format("woff"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
  }

Dans le dossier css, j'ai créé un dossier de polices contenant les polices font-awesome et @ font-face fait référence à ce chemin:

@font-face {
  font-family: "FontAwesome";
  src: url("./fonts/fontawesome-webfont.eot?v=4.7.0");
  src: url("./fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("./fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("./fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("./fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("./fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

Dois-je dire au marionnettiste qu'il y a des polices qu'il devrait utiliser spécifiquement ou ai-je manqué autre chose?

Merci d'avance, Pascal

Modifier: J'ai essayé d'utiliser un chemin absolu, mais cela ne fonctionnera pas non plus. Si je fais cela, même le site Web ne contiendra pas les polices.

const browser = await puppeteer.launch({
      args: ['--disable-dev-shm-usage', '--no-sandbox', '--headless', '--disable-gpu'],
      executablePath: pathToChrome}
);
const page = await browser.newPage();
const content = await page.setContent(pdfOptions.dom);
const addCss7 = await page.addStyleTag({path: appPath +  '/public/css/framework.css'});
const addCss8 = await page.addStyleTag({path: appPath +  '/public/css/print-media.css'});
const buffer = await page.pdf();
F.log(buffer);


9 commentaires

Avez-vous essayé avec headless false pour voir si les polices sont appliquées dans la page?


@hardkoded je viens de l'essayer. Les icônes n'y sont pas non plus chargées.


Je parie que le problème est dans "./fonts/fontawesome-webfont.eot?v=4.7.0" . Vous devez penser que si vous appelez newPage et setContent, votre racine sera "about: blank" donc il ne pourra pas trouver un "./fonts/"


oui je le pense aussi, mais comment dire au chrome où chercher ?.


peut-être pourriez-vous publier ça quelque part et cibler une URL absolue


je vais essayer ça plus tard, merci


@hardkoded a essayé avec des chemins absolus ne fonctionnant toujours pas ... voir modifier.


Pourriez-vous essayer d'utiliser une URL cdnjs cdnjs.com/libraries/font-awesome ?


cela fonctionne avec cdn, mais je dois utiliser une version téléchargée.


3 Réponses :


2
votes

Comme j'ai commenté la question. Le problème est l'emplacement about: blank . Ce que je recommande, c'est de faire ce qui suit:


2 commentaires

Cela fonctionnera si je lance marionnettiste avec headless = false. Mais dans mon PDF, les icônes ne s'afficheront toujours pas :-( Merci encore pour l'instant!


Bonjour encore une fois en dur, je viens de réaliser, dans un autre contexte, que cela fonctionne pour CERTAINES des icônes. Curieusement, j'ai un PDF de 3 pages. Les icônes sur la 2ème page sont affichées, mais pas sur la 1ère et la 3ème. Merci encore, cela aide encore beaucoup qu'au moins quelques icônes soient là. Si vous avez une idée de la raison pour laquelle ce comportement se produit, veuillez me le faire savoir :-)



0
votes

J'ai résolu ce problème en copiant les polices spécifiques dans le dossier de polices de mon système de fichiers local. Sous Mac OS, je devais copier toutes les polices Font Awesome dans ~ / Library / Fonts .


1 commentaires

Salut Cory, je vais essayer ça. Je viens de rentrer de mes vacances, donc je pense que je n'aurai pas le temps avant la semaine prochaine. vous reviendra avec les résultats.



0
votes

J'ai intégré la police awesome css dans l'en-tête HTML. Cela a fonctionné pour moi.

.

J'alimente du contenu HTML en utilisant la méthode setContent mais je peux voir les icônes sur le HTML avant d'inclure le lien ci-dessus, et je n'aime pas l'idée de me fier à un lien css externe.


0 commentaires