Unable to convert Base64 PDF to JPEG – page.render Not Working

💬 App Building
1

Goal: I'm trying to convert a Base64-encoded PDF into a JPEG image inside a Retool JavaScript Query. I did that outside Retool, but when running inside Retool it doesn't work.

Steps:

Tried using pdf.js await page.render().promise, but it causes Retool to hang indefinitely. But if I create an HTML file and run it using , it works perfectly.

Looked into alternative libraries like "pdf-lib" and "pdf-img-convert", but found that they either don’t support rendering PDFs into images or are not available via CDN for direct use in Retool.

Tried page.render without using await and promise, but couldn't get the PDF content to render onto a canvas. It renders a black image, as it couldn't render the PDF content into the canvas before the URL conversion (canvas.toDataURL('image/jpeg');).

Details:
Retool version 3.166.0-317de72 (Build 232880)

Code (JS Query):

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.9.179/pdf.worker.min.js';

const defaultBase64 = await utils.serializePage({
  scale: 2,
  componentsToInclude: ["container"]
});

// Decode Base64 PDF data
const pdfData = new Uint8Array(atob(defaultBase64.split(",")[1]).split("").map(char => char.charCodeAt(0)));

// Load PDF and first page
const pdf = await pdfjsLib.getDocument(pdfData).promise;
const page = await pdf.getPage(1);

// Set up canvas
const viewport = page.getViewport({ scale: 1 });
const canvas = document.createElement("canvas");
canvas.width = viewport.width;
canvas.height = viewport.height;
const ctx = canvas.getContext("2d");

// SCRIPT STOPS HERE
await page.render({ canvasContext: ctx, viewport }).promise;

// Convert canvas to JPEG Base64
const jpegBase64Data = canvas.toDataURL("image/jpeg").split(",")[1];
console.log("JPEG Base64:", jpegBase64Data);

Screenshots:
I also added this to the library, I think it's the right place to put the JS CDN, right?

js-library
js-library746×257 46.8 KB

And this is the container i'm trying to download as JPEG

my-container
my-container752×933 76.7 KB

2

Hi @Teloli,

Thanks for reaching out.

Yes, it looks like you are uploading the library correctly in settings. However, not all libraries are compatible with Retool. I also haven't gotten this library working on my side yet :thinking:

It might work better in a custom React component, but I haven't tested this yet.

We are tracking request for a native feature that would convert pdfs to jpegs in Retool, so I will follow up here if that ships. I don't have an eta though, so I'd still recommend exploring a workaround.

One of my teammates shared an alternative solution using an API here

3

Hi @Tess,

Thank you so much for getting back to me!

I’d be really happy to be notified if a native PDF-to-JPEG conversion feature is released in Retool — that would be super helpful.

I also checked out the solution your teammate shared. I believe it could work, though I was initially hoping to find a free way to handle this, similar to how PDF conversion works in Retool today using utils.serializePage.

Thanks again for the support!

1 Like