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?
And this is the container i'm trying to download as JPEG
