Text size changes when using html-pdf local vs online

2.7k Views Asked by At

I'm actually using node js and html-pdf lib to generate a pdf on the server which is return as a blob to the client. When I did it on my local machine everything is fine but when I upload it to the server and test it out. The text size increases when in production.

I've created a function that takes an object as a parameter:

async function generatePDF(object) {
  let htmlContent = `
  <!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
    <style>
      body,
      html {
        font-family: arial, sans-serif;
        color: rgb(46, 46, 46);
      }
    </style>
  </head>
  <body>
  <br />
  Date: ${object.todayDate}

  <div style="margin-top: 60px">
    <h3 style="border-top: 1px solid black">Dr. ${object.name} ${object.firstname}</h3>
  </div>
</html>
`;

Down below is the code to generate PDF from the HTML file created:

    let sideMargin = "1.5cm";
    var options = {
      format: "A5",
      border: {
        top: "1.5cm", // default is 0, units: mm, cm, in, px
        right: sideMargin,
        bottom: "3.0cm",
        left: sideMargin,
      },
    };
    console.log(options);
    var path = require("path");
    var appDir = path.dirname(require.main.filename);

    let date = Date.now();
    let newPDF = `${appDir}/files/${date}new.pdf`;
    let newHTML = `${appDir}/files/${date}new.html`;

    htmlData["fileName"] = newHTML;
    console.log(`Generating new PDF '${newPDF}`);

    await generatePDF(htmlData);
    var html = fs.readFileSync(`${newHTML}`, "utf8");
    pdf.create(html, options).toFile(`${newPDF}`, function (err, res) {
      if (err) return console.log(err);
      console.log(res);
      r.sendFile(`${newPDF}`, (error) => {
        if (!error) {
          fs.unlinkSync(`${newPDF}`);
          fs.unlinkSync(`${newHTML}`);
        }
      });
    });

The problem is that locally on my machine everything is fine, but online the text size of the PDF is way bigger, and instead of returning one page it's returning back two pages (of course the content I've set here in the HTML is not the result I want, it is just an example).

1

There are 1 best solutions below

0
On

Hey i've found what was the problem, there is no solution to this problem yet. The work around is to add

html {
  zoom: 0.55;
}

to the CSS file/code There's actually an open issue for this.