Creating image file of retool component

  • Goal: create high resolution image file from retool component

  • Steps:

  • I tried serializing component with serializePage utility function but it only serialize in pdf format.

  • after I download file through downloadFile utility function as image, it returns blank image as the data is in pdf format.

  • Details:

let dataURL = utils.serializePage(
{scale: 3, componentsToInclude: ["productInfoContainer"]}
)
utils.downloadFile({base64Binary:dataURL.data},'filename','png')

Hello @dave1,

Good question, I have two potential work arounds but still doing some testing to get this working how you would like.

I thought the issue might be your use or dataURL.data, since utils.serializePage() should return a string.

But that did work to download an image file but it was corrupted... and without the .data at the end it didn't work.

I am able to download a PDF components contents with utils.downloadPage("filename", {componentsToInclude: ["pdf1"]});

But this is low resolution.

My other work around was similar to what you have, to first serialize the component and then download the file from the base64 encoded string which I thought would work.


But for some reason even though I can return dataURL it it shows that it is a string, which is after 'base64,' using the string method of .split to grab only the base64 encoded file string and not the extra data before doesn't seem to be working :thinking:

I just used a second JS Query block to take the above query1 and then apply the logic I have on line 7 to split this string and it did work.

Test this out and let me know if this works for you.

Ok so did some more research and the reason I needed to chain together two queries is because utils.serializePage is async and needs to have an await before it :sweat_smile:

I tried using the scale input for the utils.downloadPage method, which does improve the quality when I do utils.downloadPage("filename", {componentsToInclude: ["pdf1"], scale: 8} );

But runs into a cap with larger numbers, when I used 50 and 100 it renders an empty white page as you reported. But this seems to be the best option for downloading a higher quality image.