Same template looks different: playground vs online

Oszkar Sziklai

Hi!

I've been fiddling for a while with my ASP.NET Core webapp, where I send my razor view html to js report online. The interesting thing is, when I run it with the local binary it looks fine, but with the remote client and using jsreport online it looks completely different (different text size, formatting, etc). If I upload the html template and css to jsreport online manually and run it there, it still looks wrong. However, if I use the Playground, it looks fine, the same as with the local binary, with the same HTML and CSS. The settings are the same, everything is the same, what could be wrong?

Here is the playground link which looks good, however copy-pasting the same HTML + Css into jsreport online, it looks bad:

https://playground.jsreport.net/studio/workspace/r1i7mLb2-/6

Oszkar Sziklai

Actually I figured out the difference: In Playground using 1.9.8 PhantomJS it looks corret. With 2.x it's wrong. In jsreport online with 1.9.8 PhantomJS it looks wrong, but with 1.9.8-windows it looks correct and the same as with 1.9.8 PhantomJS in Playground. Playground uses Windows deployment and the online one Linux?

Update: Shame on me, I just checked the PhantomJS PDF recipe page which states the exact thing. Unix and Windows environments differ. Then I guess really the online and Playground versions are different.

Is there a way to enforce 1.9.8-windows phantomjs when running the remote client from my asp.net webapp?

bjrmatos

@Oszkar-Sziklai yes! playground uses Windows and Online uses Linux. unfortunately when using phantomjs the output will have some differences depending on the OS in which the rendering is happening.

there are some workarounds:

using css scale https://jsreport.net/learn/phantom-pdf#different-sizes-on-windows-vs-unix
using css zoom https://forum.jsreport.net/topic/188/dpi-option-doesn-t-seems-to-work/6

probably some of the workarounds will help you in having the same content with the same layout in different OS.

jan_blaha

Additionally, you can also enforce jsreportonline to use the windows phantomjs using this following global custom script. Just create it in jsreportonline, mark it as global and you are done.

function beforeRender(req, res, done) {
    if (req.template.recipe === 'phantom-pdf') {
        req.template.phantom =  req.template.phantom || {}
        req.template.phantom.phantomjsVersion = '1.9.8-windows'
    }
    
    done()
}

However make sure to understand the difference. The linux rendering is currently better choice for scale and critical rendering.

Oszkar Sziklai

Perfectly working with the global config for 1.9.8-windows (Should be fine for the low volume). Thank you very much, awesome product!