PDF export of an element using linear-gradient background

[Andrei]

I noticed that when using the kendo-pdf-export wrapper if I had elements using linear-gradient for background, it would not export the background.

For example I had some elements that where using a hashing background.

[Andrei]

I did find a solution and I wanted to share it here.

I noticed that using images for background works, so I went and converted my linear-gradient to data:image. There are online tools that can help with it, like this one Gradient to Image maker (angrytools.com)

Then you can use  something like this:

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAoCAYAAAAIeF9DAAAAAXN...");
background-repeat: repeat-x;
background-size: 10px 100%;

IMPORTANT: background-size cannot use any auto measurements. Only % and px. When using auto , background stops showing again.

 

Hope this helps save someone some time :P