CSS properties in PDF export

Gantt
#1

We’ve migrated our app over to using CSS properties, however it appears that the PDF export service doesn’t support these. Is there any way of getting this to work? I’ve tried using them on their own

gantt.exportToPDF({
  name: name,
  header: '<style>:root { --black: #000000; } .gantt_data_area { background: var(--black); }</style>',
  raw: true
});

And also tried using a polyfill, but it seems that JS doesn’t get executed?

gantt.exportToPDF({
  name: name,
  header: '\
    <script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>\
    <style>:root { --black: #000000; } .gantt_data_area { background: var(--black); }</style>',
  footer: '<script>cssVars({ onlyLegacy: false });</script>',
  raw: true
});

Is there any way around this, as it’s pretty horrible maintaining a colour scheme when you have to hard code the values in somewhere else

#2

Hello,
Unfortunately, there is no way to include the javascript code in the export function so that it is executed on the export server, and CSS variables aren’t supported yet. The dev team will add that functionality in the future, but I cannot give you any ETA.

However, you can try converting the styles on your current page and include them inside the style element that is inside the header property:

  var styles = document.getElementById("styles").innerHTML;
  var styles_converted = document.querySelectorAll("style[data-cssvars='out']")[0].innerHTML
    
  gantt.exportToPDF({
    raw:true,
    header: "<style>" + styles + styles_converted + "</style>"
  });

Here is the snippet that demonstrates how it works:
http://snippet.dhtmlx.com/323a2aa27

#3

Ah great idea, hadn’t actually realised the polyfill added that element. Thanks for this!

#4

Hello,
The dev team fixed the bug with the CSS variables and modern style rules that were not working with the export server:
https://snippet.dhtmlx.com/5/af17d3149