CODEWITHSUNDEEP
javascriptpdffontspuppeteerwebautomation
404_Name_Not_Found
404_Name_Not_Found

Reputation: 437

PDF created with puppeteer not showing font-awesome icons

i need to create a PDF Buffer and save this to the database. I am passing the complete DOM to puppeteer and most of it works just fine. When i open the created PDF Buffer, bootstrap styles are applied and i get a beautifull PDF.

However, font-awesome icons will not show up. i have only two CSS files: framework.css (created with SASS and containing custom styles, bootstrap styles and font-awesome) and print-media (contains print media css to hide or show stuff like the navigation). Here is my Code to create the PDF Buffer:

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);

Inside the css folder i created a fonts folder containing the font-awesome fonts and @font-face refers to this path:

@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;
}

Do i have to tell puppeteer that there are fonts it should use specifically or did i miss something else?

Thanks in advance, Pascal

Edit: Tried to use absolute path, but this will wont work either. If i do this, even the Website will not contain the fonts.

@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;
  }

Upvotes: 5

Views: 6646

Answers (3)

Rabin
Rabin

Reputation: 51

I have embedded the font awesome css to the HTML header. It worked for me.

<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>.

I am feeding HTML content using setContent method but I can see icons on the HTML before including the above link, and I don't like the idea to rely on external css link.

Upvotes: 0

Cory Robinson
Cory Robinson

Reputation: 5272

I solved this issue by copying the specific fonts to my local filesystem fonts folder. On Mac OS I had to copy all Font Awesome fonts to ~/Library/Fonts.

Upvotes: 0

hardkoded
hardkoded

Reputation: 21695

As I commented on the question. The problem is the about:blank location. What I recommend is doing the following:

Upvotes: 3

Related Questions