Can't access font-awesome resources in PDFexporter

[mmelcot]

In BryntumScheduler exploded view, resources like font-awesome fonts can be served by the exporter server, using -r /web/application/resources.

However, the resources are then available under https://exporter-server/resources/ (for instance, https://exporter-server/resources/fonts/fa-solid-900.eot) whereas the html fragment stemming from the Bryntum Scheduler will reference them as follow:

schedulerpro.classic-light.css
23:  src: url(fonts/fa-solid-900.eot);

Therefore the pdf exporter is not able to find them.

I used translateURLsToAbsolute to rewrite scheduler server URLs to be accessible by the pdfexporter server. However, this is apparently not translating the css rules themselves.

Is there a way to circumvent that?

[pmiklashevich]

Hello,

This is due to CORS issue. You need to allow cross origin requests from the server where your export is hosted (Server A) to the server where your application is hosted (Server B). Another option is to copy all resources from Server B to Server A and setup paths using translateURLsToAbsolute config and using -r argument when you start the export server:

node ./src/server.js -h 8080 -r path/to/resources

We will update our docs to make it clear. Meanwhile please check out Scheduler/examples/export/README.md and Scheduler/examples/_shared/server/README.md for details.

Best,
Pavel

[Maxim Gorkovsky]

I used translateURLsToAbsolute to rewrite scheduler server URLs to be accessible by the pdfexporter server. However, this is apparently not translating the css rules themselves.

Hello.
translateURLsToAbsolute should be helpful here. It doesn't need to replace urls inside stylesheets themselves, e.g. if you're loading CSS from https://server/app/style.css and that css is referring to url(fonts/fa-solid-900.eot);, it means font would be loaded from https://server/app/fonts/fa-solid-900.eot.

So if you configure exporter correctly, it should grab styles:

pdfExport : {
  translateURLsToAbsolute: 'https://server' // set proper origin here
}

If stylesheet is loaded but font is not, it is indeed likely request was blocked by CORS policy. Make sure your app server allows loading resources either for all hosts by setting header to Access-Control-Allow-Origin: * or to specific hosts like Access-Control-Allow-Origin: https://exporter-server