Node-html-pdf: Header and footer is not visible in pdf

Created on 3 Feb 2018  路  4Comments  路  Source: marcbachmann/node-html-pdf

I am using Ubuntu 16.04 , "html-pdf": "^2.1.0", nodeJs , Express ,pug template engine.
On generating the pdf , There is no header and footer.
This is the code.

import express from 'express';
import {orderBy} from 'lodash';//-
import {table} from 'app/orm';//-
import {camelToReadable, firstLetterCaps} from 'app/http/pdf/utils/string';//-
import {education} from 'app/http/pdf/utils/experiences';//-
import {month} from 'app/http/pdf/utils/month';//-
import pdf from 'html-pdf';
import request from 'request-promise';

const app = express();

app.set('views', __dirname);//-
app.set('view engine', 'pug');//-

app.locals.moment = require('moment');//-

export function generatePDF(html, user) {
  const options = {
    'header': {
      'height': '3cm',
      'contents':
        '<div>Header</div>'
    },
    'zoomFactor':'0.654545',
    'footer': {
      'height': '2cm',
      'contents':
        '<div>Footer</div>'
    },
    timeout: 120000
  };
  return new Promise((resolve, reject) => {
    const fileName= `${user.name}-${user.username}-CV.pdf`;
    pdf.create(html,options).toFile(`./static/${fileName}`, (err) => {
      if (err) {
        reject(err);
      } else {
        resolve(fileName);
      }
    });
  });
}

app.post('/', async (req, res) => {
  const details = req.body.details;
  const theme = req.body.theme;
  const url = 'http://localhost:3000/pdf/'+theme;
  const html = await request({
    method: 'GET',
    json: true,
    uri: url,
    body: {details},
    headers: {
      'auth-token': req.authKey
    }
  });

  const html2 = '<html>dhuiebgui</html>';

  //const html = await cvTemplate(details,theme,req.user.id);
   const fileName = await generatePDF(html2, req.user);
   return res.status(200).send({msg: 'Pdf generated successfully.', fileName});
});

app.get('/:theme', async (req, res) => {
  let details = req.body.details;
  let theme = req.params.theme;
  let userExperiences = await table('user_experiences')
    .eagerLoad('experiences', 'details.evidences')
    .where({user_id: req.user.id})
    .all();

  userExperiences = userExperiences.map((ue) => {
    return {...ue, details: ue.details.filter((d) => details.indexOf(d.id) > -1)}
  })

  userExperiences = [
    '0', '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'].map((index) => {
    return userExperiences.filter((e) => {
      return e.index === index;
    });
  }).reduce((all, item) => all.concat(item), []);

  return res.render(theme, {
    user: req.user,
    userExperiences,
    camelToReadable,
    firstLetterCaps
  });
});

export default app;

Most helpful comment

I am experiencing the same issue. Where the header and the footer is not rendering.
What happens is the contrary. When I include either of the pageHeadres or pageFooters class. That class is completely ignored in my pdf file. If I change the class name then it renders, although not as header or footer but just wherever I put the element. The above description fro #cody-by is unclear as to propose a solution. Please advice. thanks.

All 4 comments

Probably you need to add one of header or footer
https://github.com/marcbachmann/node-html-pdf#footers-and-headers

I am experiencing the same issue. Where the header and the footer is not rendering.
What happens is the contrary. When I include either of the pageHeadres or pageFooters class. That class is completely ignored in my pdf file. If I change the class name then it renders, although not as header or footer but just wherever I put the element. The above description fro #cody-by is unclear as to propose a solution. Please advice. thanks.

I solved the problem by removing the font-faces from my HTML template. Not sure why it depends on each other, but my footer is visible again in the PDF output

@PierreChavaroche I have the same issue. Header and footer will not render if you have font-face set in your HTML.
I'm using version 3.0.1 now

Was this page helpful?
0 / 5 - 0 ratings

Related issues

antiframes picture antiframes  路  4Comments

hishamabutt picture hishamabutt  路  4Comments

cmoulliard picture cmoulliard  路  3Comments

jimit-hothi picture jimit-hothi  路  4Comments

qianweicheng picture qianweicheng  路  5Comments