DEV Community

Muhammad Omer Mirza
Muhammad Omer Mirza

Posted on

Convert a PDF to PowerPoint (.pptx) entirely in the browser

#pdf #opensource #javascript #webdev

"PDF to PowerPoint" sounds like it needs a server: parse the PDF, rebuild slides, hand back a .pptx. But you can do the whole thing in the browser — render each page to an image with pdf.js, then assemble a genuine PowerPoint file with PptxGenJS. No upload, no backend, $0 hosting.

Here's the approach, including the two things that trip people up: matching the slide size to the page aspect ratio, and getting a downloadable .pptx blob out.

The two libraries

  • pdf.js — Mozilla's PDF engine. Renders any page onto a <canvas>.
  • PptxGenJS — builds real Open-XML .pptx files in JS (it bundles JSZip to assemble the archive). 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.12.0/dist/pptxgen.bundle.js"></script>
Enter fullscreen mode Exit fullscreen mode

Note: PptxGenJS isn't on cdnjs — use the jsDelivr pptxgen.bundle.js build, which includes JSZip so the file actually zips up.

And the worker line pdf.js needs (set it before parsing anything, and don't defer the pdf.js tag):

pdfjsLib.GlobalWorkerOptions.workerSrc =
  "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
Enter fullscreen mode Exit fullscreen mode

Step 1 — read the file locally 

const file = input.files[0];
const bytes = new Uint8Array(await file.arrayBuffer()); // never leaves the page
const pdf = await pdfjsLib.getDocument({ data: bytes }).promise;
Enter fullscreen mode Exit fullscreen mode

Step 2 — size the deck from the first page

PowerPoint slides are measured in inches; PDF pages in points (1 pt = 1/72 inch). To avoid letterboxing, define a custom layout that matches the PDF's own aspect ratio instead of forcing 16:9:

const pptx = new PptxGenJS();

const firstVp = (await pdf.getPage(1)).getViewport({ scale: 1 });
const wIn = Math.min(56, firstVp.width / 72);   // PptxGenJS caps a layout at 56"
const hIn = Math.min(56, firstVp.height / 72);

pptx.defineLayout({ name: "PDFPAGE", width: wIn, height: hIn });
pptx.layout = "PDFPAGE";
Enter fullscreen mode Exit fullscreen mode

Step 3 — render each page and add it as a slide

Render at a scale above 1 so the slide image is crisp (scale = 2 is a good default), then place it full-bleed. The contain math below keeps it correct even if some pages are a different size from the first:

for (let n = 1; n <= pdf.numPages; n++) {
  const page = await pdf.getPage(n);
  const scale = 2;
  const vp = page.getViewport({ scale });

  const canvas = document.createElement("canvas");
  canvas.width = Math.floor(vp.width);
  canvas.height = Math.floor(vp.height);
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "#fff";                       // JPEG has no alpha
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  await page.render({ canvasContext: ctx, viewport: vp }).promise;

  const data = canvas.toDataURL("image/jpeg", 0.85);

  // fit this page into the deck slide, preserving aspect ratio
  const pwIn = vp.width / scale / 72;
  const phIn = vp.height / scale / 72;
  const fit = Math.min(wIn / pwIn, hIn / phIn);
  const dw = pwIn * fit, dh = phIn * fit;

  const slide = pptx.addSlide();
  slide.addImage({ data, x: (wIn - dw) / 2, y: (hIn - dh) / 2, w: dw, h: dh });

  canvas.width = canvas.height = 0;             // free memory between pages
}
Enter fullscreen mode Exit fullscreen mode

Gotcha #1: render page-by-page, free the canvas

A 30-page deck at scale: 2 allocates a lot of canvas memory. Render one page at a time and zero out the canvas (canvas.width = canvas.height = 0) after each, or large PDFs will blow up tab memory.

Step 4 — get a downloadable .pptx blob

writeFile() triggers a download directly, but if you want to wire your own button, ask for a blob:

const blob = await pptx.write({ outputType: "blob" });

const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "presentation.pptx";
a.click();
URL.revokeObjectURL(url);
Enter fullscreen mode Exit fullscreen mode

Gotcha #2: the zip step is async

PptxGenJS assembles the .pptx (a zip archive) asynchronously. await the write() — and if you ever run this in a hidden/background tab, the timers JSZip relies on get throttled and the write appears to hang. Do the conversion in a visible tab.

What you get (and don't)

Each page becomes a pixel-perfect image on its own slide — the layout is identical to the PDF, and the user can drop their own text boxes, notes and shapes on top. The trade-off: the text lives inside the image, not as editable text boxes. For getting a PDF into a deck without redoing the layout by hand, that's usually exactly what you want.

  • Privacy: the PDF never touches a server.
  • Cost: static hosting, no backend.
  • Trade-off: memory scales with page count × DPI — so render incrementally.

I shipped this exact approach as a free tool — PDFNest's PDF to PowerPoint converter — one slide per page, all in the browser, nothing uploaded. There's a PDF to Image tool built on the same pdf.js render path, and the rest of the free PDF toolkit is here. Happy to dig into the PptxGenJS layout math in the comments.

Top comments (0)