DEV Community: Muhammad Omer Mirza

Convert Word and Excel to PDF in the browser (no server, no upload)

Muhammad Omer Mirza — Tue, 23 Jun 2026 04:59:24 +0000

Office-to-PDF converters almost always upload your file to a server. For an invoice, a contract or a salary sheet, that's a lot of trust for a format change. But you can convert Word and Excel to PDF entirely in the browser — read the file with the right parser, rebuild it as clean HTML, and let the browser's own print engine produce a pixel-faithful PDF.

Here's the pattern for both, plus the one trick that makes the PDF output rock-solid instead of blank.

The idea: parse → HTML → native print

There's no need for a heavyweight PDF-drawing library. Browsers already have a great PDF renderer behind window.print() ("Save as PDF"). So the job is just: get the document into clean HTML, then print that HTML off-screen.

The reliable HTML→PDF helper

Render the HTML in a hidden <iframe> and call print() on it. This never produces the blank pages that html2canvas-based approaches sometimes do, and it keeps real text (selectable, searchable) instead of rasterizing:

function printHtmlAsPdf(html, { format = "a4", orientation = "portrait", margin = 12 } = {}) {
  const pageCss =
    `<style>@page{size:${format} ${orientation};margin:${margin}mm}
     html,body{margin:0;background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}</style>`;
  const doc = `<!DOCTYPE html><html><head><meta charset="utf-8">${pageCss}</head><body>${html}</body></html>`;

  const iframe = document.createElement("iframe");
  iframe.style.cssText = "position:fixed;left:-10000px;top:0;width:820px;height:1160px;border:0;";
  document.body.appendChild(iframe);

  iframe.onload = () => {
    setTimeout(() => {
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      setTimeout(() => iframe.remove(), 120000);
    }, 300);
  };
  const d = iframe.contentWindow.document;
  d.open(); d.write(doc); d.close();
}

The user picks "Save as PDF" in the print dialog. That's the only UX trade-off, and you get perfect pagination and crisp text for free.

Word (.docx) → PDF with mammoth.js

mammoth.js converts .docx into semantic HTML — headings, lists, tables, bold/italic, embedded images. It deliberately ignores fiddly Word styling, which is exactly what you want for a clean PDF.

<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>

const buf = await file.arrayBuffer();                // .docx read locally
const { value: html } = await mammoth.convertToHtml({ arrayBuffer: buf });

const styled = `
  <style>
    body{font-family:Georgia,serif;font-size:12pt;line-height:1.5;color:#111}
    h1,h2,h3{font-family:Arial,sans-serif;line-height:1.25}
    table{border-collapse:collapse;width:100%}
    td,th{border:1px solid #999;padding:6px 8px}
    img{max-width:100%;height:auto}
  </style>${html}`;

printHtmlAsPdf(styled, { format: "a4", margin: 16 });

Gotcha: .docx only

mammoth handles the modern .docx (Open XML) format, not the legacy binary .doc. Detect it and tell the user to re-save:

if (!/\.docx$/i.test(file.name)) {
  alert("Please use a .docx file (open old .doc in Word and Save As .docx).");
}

Excel (.xlsx/.csv) → PDF with SheetJS

SheetJS reads .xlsx, .xls and .csv, and can emit an HTML table per sheet:

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

const bytes = new Uint8Array(await file.arrayBuffer());
const wb = XLSX.read(bytes, { type: "array" });

let sections = "";
for (const name of wb.SheetNames) {
  const fullHtml = XLSX.utils.sheet_to_html(wb.Sheets[name]);
  // sheet_to_html returns a whole document — pull out just the <table>
  const table = (/<table[\s\S]*<\/table>/i.exec(fullHtml) || [fullHtml])[0];
  sections += `<h2>${name}</h2>${table}`;
}

const styled = `
  <style>
    body{font-family:Arial,sans-serif;font-size:10pt}
    table{border-collapse:collapse;width:100%}
    td,th{border:1px solid #b3b3b3;padding:4px 7px;white-space:nowrap}
    h2 + table{page-break-inside:auto}
  </style>${sections}`;

printHtmlAsPdf(styled, { format: "a4", orientation: "landscape", margin: 12 });

Gotcha: sheet_to_html returns a full document

XLSX.utils.sheet_to_html() gives you a complete <html> page, not a fragment. If you concatenate several of those you get nested documents. Extract just the <table> (regex above) before stitching sheets together. Also: default to landscape — spreadsheets are wide and clip badly in portrait.

What carries over

Source	Preserved	Dropped
Word `.docx`	headings, lists, tables, images, basic styling	text boxes, footnotes, complex columns
Excel `.xlsx`	every sheet's values + table structure	charts, conditional formatting, cell colors

The tables and text are rebuilt from content, so the result is clean and readable rather than a pixel copy — and for sharing a finished document, that's the point.

Privacy: files are parsed and rendered locally; nothing is uploaded.
Cost: pure static hosting.
Text stays text: real, selectable PDF text — not a screenshot.

I built both of these as free tools — Word to PDF and Excel to PDF — running fully in the browser with no upload. The whole free PDF toolkit is here. Happy to talk through the mammoth/SheetJS edge cases in the comments.

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

Muhammad Omer Mirza — Tue, 23 Jun 2026 04:54:13 +0000

"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>

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";

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;

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";

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
}

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);

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.

Run OCR 100% in the browser: images & scanned PDFs to text, no server

Muhammad Omer Mirza — Sat, 20 Jun 2026 14:26:57 +0000

OCR usually means uploading your document to someone's server. For a receipt or a contract, that's a privacy cost for a one-line task. But you don't need a server — a full OCR engine runs in the browser via WebAssembly. Here's how to turn images and scanned PDFs into editable text fully client-side.

The pieces

Tesseract.js — the Tesseract OCR engine compiled to WASM. Recognises text in an image.
pdf.js — to render scanned PDF pages to a canvas first (a scanned PDF is just images, so we OCR each page).

<script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

OCR an image

The modern API is a worker you create once, reuse, then terminate:

async function imageToText(file, lang = "eng") {
  const worker = await Tesseract.createWorker(lang); // downloads core + lang data on first run
  const { data: { text } } = await worker.recognize(file); // accepts File/Blob/canvas/<img>
  await worker.terminate();
  return text;
}

That's it for images. recognize() takes a File directly, so a file input is enough — nothing leaves the page.

OCR a scanned PDF

A scanned PDF has no text layer, only page images. So render each page to a canvas (at a generous scale for accuracy) and OCR the canvas:

async function scannedPdfToText(bytes, lang = "eng") {
  pdfjsLib.GlobalWorkerOptions.workerSrc =
    "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";

  const pdf = await pdfjsLib.getDocument({ data: bytes }).promise;
  const worker = await Tesseract.createWorker(lang);
  let out = "";

  for (let n = 1; n <= pdf.numPages; n++) {
    const page = await pdf.getPage(n);
    const viewport = page.getViewport({ scale: 2.5 }); // ~180 DPI — good OCR accuracy
    const canvas = document.createElement("canvas");
    canvas.width = Math.floor(viewport.width);
    canvas.height = Math.floor(viewport.height);
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    await page.render({ canvasContext: ctx, viewport }).promise;
    const { data: { text } } = await worker.recognize(canvas);
    out += text + "\n\n";
  }
  await worker.terminate();
  return out;
}

Gotchas worth knowing

First run is heavy. Tesseract.js downloads its WASM core (~2–4 MB) and the language traineddata (a few MB) on first use, then caches them. Show a "Loading OCR engine…" state so the wait isn't mysterious.
Scale matters for PDFs. Rendering pages at scale: 1 gives ~72 DPI and poor accuracy. Use ~2.5 (≈180 DPI). Higher is sharper but uses more memory.
Match the language. createWorker('eng') vs 'spa' etc. — the right language massively improves accuracy on accented text. You can combine: 'eng+spa'.
Reuse the worker. Creating a worker per page re-loads everything each time. Make one, loop, then terminate().
Set a white background before drawImage on the canvas — transparent PDF regions otherwise OCR as noise.
OCR isn't magic. Clean, straight, high-contrast scans read well; blurry phone photos and handwriting don't. Set that expectation in the UI.

Why client-side

Privacy: the document never leaves the device — ideal for IDs, contracts, statements.
$0 backend: it's static hosting; OCR runs on the user's CPU.
Offline-friendly: once the WASM + lang data are cached, it works without a connection.

The trade-off is the first-load download and that recognition uses the user's CPU — fine for everyday documents.

I built this into a free tool — PDFNest's Image to Text (OCR) does exactly this (images + scanned PDFs, multiple languages, copy/download), all in the browser. There's also a companion guide on extracting text from PDFs. Happy to talk through the Tesseract/pdf.js details in the comments.

PNG to PDF without losing transparency: what most converters get wrong

Muhammad Omer Mirza — Sat, 20 Jun 2026 14:16:02 +0000

You export a logo as a transparent PNG, drop it into a "PNG to PDF" converter, and the result has an ugly black box around it — or the transparency silently becomes white and ruins a design meant to overlay something. This is the single most common bug in PNG→PDF conversion, and it comes from one fact people forget:

A PDF page is not transparent. When you print or flatten it, "transparent" has to become some colour.

So the real question isn't "does it keep transparency?" — it's "what should the transparent pixels become, and who decides?" Good converters make that a choice. Let's build one client-side.

The library: pdf-lib

pdf-lib creates and edits PDFs in pure JavaScript — in the browser, no server. It can embed PNGs with their alpha channel:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>

const doc = await PDFLib.PDFDocument.create();
const png = await doc.embedPng(pngBytes); // alpha preserved
const page = doc.addPage([png.width, png.height]);
page.drawImage(png, { x: 0, y: 0, width: png.width, height: png.height });
const pdfBytes = await doc.save();

That "alpha preserved" is the trap. If you embed a transparent PNG directly, the transparent areas show whatever ends up behind them — which, on a white-printed page, is fine; on a coloured workflow, is not; and in some viewers, renders as black. You want to decide on purpose.

The fix: offer three modes

Give the user (or yourself) three options:

Flatten onto white — the safe default for anything you'll view or print.
Flatten onto black — for light artwork meant for dark backgrounds.
Keep transparency — for PDFs that will be layered over another design.

"Flatten" just means: paint a background colour, draw the PNG on top, re-encode. A <canvas> does this in a few lines:

// Returns PNG bytes, flattened onto `bg` ('white' | 'black' | 'keep')
async function preparePng(file, bg) {
  if (bg === "keep") {
    return new Uint8Array(await file.arrayBuffer()); // embed alpha as-is
  }
  const img = await loadImage(file);              // see helper below
  const canvas = document.createElement("canvas");
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  const ctx = canvas.getContext("2d");

  ctx.fillStyle = bg === "black" ? "#000" : "#fff";
  ctx.fillRect(0, 0, canvas.width, canvas.height); // background first
  ctx.drawImage(img, 0, 0);                         // PNG on top

  const blob = await new Promise((r) => canvas.toBlob(r, "image/png"));
  return new Uint8Array(await blob.arrayBuffer());
}

function loadImage(file) {
  return new Promise((resolve, reject) => {
    const url = URL.createObjectURL(file);
    const img = new Image();
    img.onload = () => { URL.revokeObjectURL(url); resolve(img); };
    img.onerror = () => { URL.revokeObjectURL(url); reject(new Error("bad png")); };
    img.src = url;
  });
}

Order matters: fill the background, then draw the image. Do it the other way and you paint over your own picture.

Putting it together (multiple PNGs → one PDF)

async function pngsToPdf(files, { bg = "white" } = {}) {
  const doc = await PDFLib.PDFDocument.create();
  for (const file of files) {
    const bytes = await preparePng(file, bg);
    const png = await doc.embedPng(bytes);
    const page = doc.addPage([png.width, png.height]); // fit page to image
    page.drawImage(png, { x: 0, y: 0, width: png.width, height: png.height });
  }
  return doc.save(); // Uint8Array — download or zip it, still no server
}

Why not just convert PNG→JPG first?

Because PNG is lossless and often holds screenshots, diagrams, and text — exactly the content JPG compression smears. Embed the PNG and you keep crisp edges at full quality. Flattening onto a solid colour doesn't recompress the visible pixels; it only resolves the alpha.

Quick reference

Mode	Transparent pixels become	Use when
White	white	normal viewing/printing (default)
Black	black	light logos on dark layouts
Keep	whatever's behind in the viewer	PDF will overlay another design

The whole thing runs in the browser, so nothing uploads and there's no backend to pay for.

I shipped this as a free tool — PDFNest's PNG to PDF converter has exactly this white/black/keep transparency control, runs client-side, and adds no watermark. There's a sibling Image to PDF tool for mixed JPG/PNG/WebP. Questions about the pdf-lib/canvas details — drop them below.

How to convert a PDF to images entirely in the browser (no upload)

Muhammad Omer Mirza — Sat, 20 Jun 2026 14:15:56 +0000

Most "PDF to image" websites work like this: you upload your file, their server renders it, and you download the result — trusting that they delete your document afterwards. For a contract, an ID scan, or a medical form, that's a lot of trust to hand over for a one-line conversion.

The good news: you don't need a server at all. Modern browsers can render PDF pages to a <canvas> and export them as PNG or JPG entirely on the client. Here's how to do it properly — including the part everyone gets wrong: resolution.

The tool: pdf.js

pdf.js (by Mozilla) is the engine behind Firefox's built-in PDF viewer. It parses a PDF and lets you render any page onto a canvas. That canvas is then a normal image you can export.

Load it from a CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

Gotcha #1: configure the worker at parse time

pdf.js does its heavy parsing in a Web Worker. If you don't point it at the worker script, you'll get a console warning and degraded performance. Set this before you load any document, and do not defer the pdf.js script (its global needs to exist when this runs):

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

Reading the file without uploading it

Use a file input and read the bytes locally with the FileReader/arrayBuffer API. Nothing leaves the page:

const input = document.querySelector("#file");
input.addEventListener("change", async () => {
  const file = input.files[0];
  const bytes = new Uint8Array(await file.arrayBuffer());
  await renderToImages(bytes);
});

Rendering each page — and the DPI that matters

This is the key part. A PDF is defined in points (1 pt = 1/72 inch). If you render at the default scale, you get a blurry ~72 DPI image. To get a crisp result you scale the viewport. The relationship is:

scale = targetDPI / 72

So 150 DPI → scale ≈ 2.08, and 300 DPI (print quality) → scale ≈ 4.17.

async function renderToImages(bytes, { dpi = 150, type = "image/jpeg" } = {}) {
  const scale = dpi / 72;
  const pdf = await pdfjsLib.getDocument({ data: bytes }).promise;
  const blobs = [];

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

    const canvas = document.createElement("canvas");
    canvas.width = Math.floor(viewport.width);
    canvas.height = Math.floor(viewport.height);
    const ctx = canvas.getContext("2d");

    // JPG has no alpha — paint a white background first, or transparency turns black.
    if (type === "image/jpeg") {
      ctx.fillStyle = "#fff";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = "high";

    await page.render({ canvasContext: ctx, viewport }).promise;

    const blob = await new Promise((r) => canvas.toBlob(r, type, 0.96));
    blobs.push(blob);
  }
  return blobs;
}

Gotcha #2: JPG and transparency

Canvas is transparent by default. Export to JPG (which has no alpha channel) and every transparent pixel becomes black. Always paint a white rectangle first when exporting JPG — note the ctx.fillRect above. PNG keeps transparency, so you can skip it there.

Downloading the result

Turn each blob into an object URL and trigger a download:

function download(blob, name) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = name;
  a.click();
  URL.revokeObjectURL(url);
}

Want a single file? Zip them client-side with JSZip — also no server needed.

When to use which DPI

DPI	scale	Use for
96	1.33	quick web previews, smallest files
150	2.08	screens, email, slides (sweet spot)
300	4.17	printing

Higher DPI = sharper but heavier. For a 20-page document at 300 DPI you're allocating a lot of canvas memory, so render page-by-page (as above) rather than all at once.

Why bother doing it client-side?

Privacy: the file never touches a server.
Speed: no upload/queue/download round trip.
Cost: it's static hosting — $0 backend.

The trade-off is memory: very large/high-DPI PDFs lean on the user's device. For everyday documents it's a non-issue.

I put this exact approach into a free tool — PDFNest's PDF to Image converter — with a format picker and a 96/150/300 DPI selector, all running in the browser with no upload. The rest of the free PDF toolkit is here if it's useful. Happy to answer questions about the pdf.js bits in the comments.