Chrome image width issue

[MG_Steve]

Hi, I've got a report that I'm using bootstrap to style it - I know about the printing issues and I've worked around them, the HTML output and PDF output is fine (I just need to scale the PDF output by 55% and it's fine - otherwise it appears the same as the image output.

I see there is a related topic from last year, has anyone got anywhere near solving this?
-> https://forum.jsreport.net/topic/1420/setting-browser-window-size-viewport-with-chrome-image-recipe

Image output:

pdf output:

html output:

[bjrmatos]

hi @MG_Steve

i would like to test this, can you share your template in the playground? i would like to check how the template renders changing the different options, and try the solutions mentioned here

[MG_Steve]

Hi @bjrmatos - sure.

Please find it in my playground account, let me know if there's something I need to do to give you access.

btw, this is another related issue, perhaps you could look at it at the same time?

https://forum.jsreport.net/topic/2170/pass-custom-parameters-to-chrome-headless-how

The reason for the latter is because I need to find a way to detect when the page is rendering if its being rendered as HTML or to a PDF. If its HTML, I don't need to set the width of the highchart, if its a pdf, I do need to set the width. So being able to debug the chrome process remotely would be ideal to figuring out if there's a way to detect or infer that its being rendered in either format.

Thanks!

Steve.

[MG_Steve]

Hi @bjrmatos - something else I've read about when looking into this, it appears that puppeter defaults to a window size of 800x600, but you can override this via the defaultViewport option when launching puppeter

see: https://github.com/puppeteer/puppeteer/blob/v1.14.0/docs/api.md#puppeteerlaunchoptions

It would be great if there was a way you could expose those settings in a way that we can set them via the jsReport Studio UI.

I have a feeling this would fix the image issue plus the pdf scaling issue I opened tickets about. Using those options you can even remove the viewpoint completely or set it to 1920x10000 - i.e. sizes that make little sense for display on a monitor, but would allow you to get a screenshot of an entire page, for example.

[MG_Steve]

Actually, I've just realised you can pass launcher options to puppeter via the "launchOptions" config value!

e.g.

"extensions": {
    "chrome-pdf": {
       "launchOptions": {
           "defaultViewport" : {
             "width": 1920,
             "height": 10000
           }
       }
    },

This then changes the size of the image

[bjrmatos]

interesting, I was not aware of the defaultViewport launchOptions, great that we did not have to change anything in order for your case to work, however, i think that changing the default is not a good idea for most the cases, it affects all chrome rendering and it can be bad if you already have other templates that expect the default viewport, it will be much better if studio adds some ui/support an option to change this per template render, so it is still worth to check this, i will take a look at it soon, we are focusing on v3 release and testing right now.