quangbuule
8/15/2017 - 1:26 AM

Headless Chrome window size issue

Headless Chrome window size issue

const path = require('path');
const fs = require('fs');
const CDP = require('chrome-remote-interface');

function loadPage(client, url) {
  const { Page } = client;
  return Page.navigate({ url })
    .then(Page.loadEventFired());
}

function printToPDF(client, url) {
  const { Page } = client;
  return loadPage(client, url)
    .then(() => Page.printToPDF({
      paperWidth: 10,
      paperHeight: 10,
      printBackground: true,
      marginTop: 0,
      marginBottom: 0,
      marginLeft: 0,
      marginRight: 0,
      scale: 1
    }));
}

function main() {
  const url = `file://${path.join(__dirname, 'template.html')}`; // may be different on Windows
  CDP(client =>
    printToPDF(client, url)
      .then(({ data }) => fs.writeFileSync('output.pdf', Buffer.from(data, 'base64')))
      .then(
        () => {
          console.log("Printed to output.pdf");
          client.close();
        },
        e => console.error(e.stack)
      )
  );
}

main();
{
  "dependencies": {
    "chrome-remote-interface": "^0.24.3"
  }
}
<!DOCTYPE html>
<html>
<head>
  <title>Testing</title>
  <style type="text/css">
  html, body {
    width: 100vw;
    height: 100vh;
  }
    body {
      color: gray;
    }

    @media(min-width: 7.5in) {
      .test1 {
        color: blue;
      }
    }

    @media(min-width: 7.6in) {
      .test2 {
        color: blue;
      }
    }

    @media(min-height: 5.6in) {
      .test3 {
        color: blue;
      }
    }

    @media(min-height: 5.7in) {
      .test4 {
        color: blue;
      }
    }

    @media(min-width: 720px) {
      .test5 {
        color: blue;
      }
    }

    @media(min-width: 721px) {
      .test6 {
        color: blue;
      }
    }

    @media(min-height: 539px) {
      .test7 {
        color: blue;
      }
    }

    @media(min-height: 540px) {
      .test8 {
        color: blue;
      }
    }
  </style>
</head>
<body>
  <p>
    Printing with paper size: 10 inch x 10 inch
  </p>
  <div class="test1">
    min-width: 7.5in
  </div>
  <div class="test2">
    min-width: 7.6in
  </div>
  <div class="test3">
    min-height: 5.6in
  </div>
  <div class="test4">
    min-height: 5.7in
  </div>
  <div class="test5">
    min-width: 720px
  </div>
  <div class="test6">
    min-width: 721px
  </div>
  <div class="test7">
    min-height: 539px
  </div>
  <div class="test8">
    min-height: 540px
  </div>
</body>
</html>