bjrmatos/electron-html-to

External Resources not loading

radiovisual opened this issue · 3 comments

radiovisual commented

First off, thanks for a cool module. 👍

I am trying to use electron-html-to to import external font files from Google Web Fonts.

I am using your HTML sample from the jsreport-electron playground which includes Google Web Fonts. But when I try to load the same sample HTML into electron-html-to, then I don't get the same result. Am I missing something?

This is the code I am running:

const fs = require('fs');
const convertFactory = require('electron-html-to');

var conversion = convertFactory({
  converterPath: convertFactory.converters.PDF,
  allowLocalFilesAccess: true,
});

const sampleHTML = `<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      div {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Hey I can do web fonts</div>
    <a href='http://jsreport.net'>And I can do click-able links</a>
    And other stuff you may need as well, check me out
  </body>
</html>`;

conversion({ html: sampleHTML }, function(err, result) {
  if (err) {
    conversion.kill();
    return console.error(err);
  }

  console.log(result.numberOfPages);
  console.log(result.logs);
  result.stream.pipe(fs.createWriteStream('test.pdf'));
  conversion.kill(); // necessary if you use the electron-server strategy, see below for details
});

This is the resulting PDF (notice the missing text "Hey I can do web fonts"):

image

And this is what I expected:

image

bjrmatos commented

hi! seems like there is a race condition.. sometimes the font requested to google fonts may load after the page has already started rendering in PDF, my best advice would be to use a setTimeout with a 4000ms and invoke the printing trigger: ELECTRON_HTML_TO_READY in the setTimeout's body (don't forget to pass the waitForJS: true option to the conversion function), and of course using a 4000 ms delay is not the real solution (it is just for you to verify that there is just a race condition), you will need to listen to the right javascript event that fires when the font resource has been loaded.

radiovisual commented

Ok, thanks for the tip! Setting an interval did prove that the problem was due to a race condition. I will figure out a suitable workaround working from this knowledge. Thanks again!

bjrmatos commented

👍