Comprehensive Guide to Docx, PPTX, XLSX, and PDF Preview Solutions

Commercial preview services

Microsoft Office Online – URL:

https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(url)}

. High fidelity, supports animations, but may load slowly and has undocumented usage limits.

Google Drive Viewer – URL:

https://drive.google.com/viewer?url=${encodeURIComponent(url)}

. Simple integration, supports files up to 25 MB, but PPTX animation is not rendered.

Alibaba Cloud IMM – paid service (reference [2]).

XDOC – third‑party service (reference [3]).

Office Web 365 – non‑Microsoft provider, basic preview (reference [4]).

WPS Open Platform – paid service (reference [5]).

Front‑end preview solutions

PPTX preview

No mature open‑source library exists. The author used the repository github.com/g21589/PPTX as a starting point, noting that it has not been updated for several years and shows compatibility issues.

Processing steps:

Query the Office OpenXML (OOXML) standard for PPTX.

Parse the PPTX ZIP container to extract [Content_Types].xml and relationship parts.

Render the presentation XML to HTML or Canvas for display.

Key code snippets:

import JSZip from 'jszip';
const zip = await JSZip.loadAsync(pptxData);
// Parse [Content_Types].xml to locate slide parts

Example helper to read content types:

async function getContentTypes(zip) {
  const content = await readXmlFile(zip, '[Content_Types].xml');
  const overrides = content['Types']['Override'];
  const slides = [];
  const layouts = [];
  for (let i = 0; i < overrides.length; i++) {
    const type = overrides[i]['attrs']['ContentType'];
    const part = overrides[i]['attrs']['PartName'].substr(1);
    if (type === 'application/vnd.openxmlformats-officedocument.presentationml.slide+xml') {
      slides.push(part);
    } else if (type === 'application/vnd.openxmlformats-officedocument.presentationml.slideLayout+xml') {
      layouts.push(part);
    }
  }
  return { slides, slideLayouts: layouts };
}

Reading slide size from ppt/presentation.xml:

async function getSlideSize(zip) {
  const content = await readXmlFile(zip, 'ppt/presentation.xml');
  const attrs = content['p:presentation']['p:sldSz']['attrs'];
  return {
    width: (parseInt(attrs['cx']) * 96) / 914400,
    height: (parseInt(attrs['cy']) * 96) / 914400
  };
}

Loading the theme via the presentation relationships file:

async function loadTheme(zip) {
  const rels = await readXmlFile(zip, 'ppt/_rels/presentation.xml.rels');
  const relationships = rels['Relationships']['Relationship'];
  let themePath;
  for (const rel of relationships) {
    if (rel['attrs']['Type'] === 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme') {
      themePath = rel['attrs']['Target'];
      break;
    }
  }
  if (!themePath) throw new Error("Can't open theme file.");
  return readXmlFile(zip, 'ppt/' + themePath);
}

The full source is available in the repository github.com/chaxus/ran (reference [10]).

PDF preview

Browsers can display PDFs directly via <iframe> or <embed>, but rendering and interaction differ across browsers. For a consistent UI, use Mozilla PDF.js.

Installation:

npm package: pdfjs-dist (reference [12]).

GitHub repository: github.com/mozilla/pdfjs (reference [13]).

PDF.js requires Node ≥ 18. Minimal component example:

import * as pdfjs from 'pdfjs-dist';
import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
pdfjs.getDocument(pdfData).promise.then(async doc => {
  const page = await doc.getPage(1);
  const viewport = page.getViewport({ scale: 1 });
  const canvas = document.createElement('canvas');
  canvas.width = viewport.width;
  canvas.height = viewport.height;
  const ctx = canvas.getContext('2d');
  await page.render({ canvasContext: ctx, viewport }).promise;
  document.body.appendChild(canvas);
});

DOCX preview

Use the open‑source docx-preview library (npm docx-preview, reference [17]) to convert DOCX to HTML/Canvas.

import { renderAsync } from 'docx-preview';
await renderAsync(buffer, document.body, document.head, { className: 'docx' });

XLSX preview

Use the package @vuelidate/xlsx (npm @vuelidate/xlsx, reference [18]) which works with Vue 2, Vue 3 and plain JavaScript.

Front‑end component summary

All front‑end solutions are wrapped into a reusable Web Component named preview (reference [19]), licensed under MIT, making the component framework‑agnostic.

Server‑side preview solutions

OpenOffice conversion

Apache OpenOffice can convert DOCX, PPTX, XLSX and other formats to PDF. The Java code uses JODConverter to start an OpenOffice service, perform the conversion, and stop the service.

public static void convertToPDF(String inputFile, String outputFile) {
    startService();
    OfficeDocumentConverter converter = new OfficeDocumentConverter(officeManager);
    converter.convert(new File(inputFile), new File(outputFile));
    stopService();
}

public static void startService() {
    DefaultOfficeManagerConfiguration cfg = new DefaultOfficeManagerConfiguration();
    cfg.setOfficeHome("C:\\Program Files (x86)\\OpenOffice 4");
    cfg.setPortNumbers(new int[]{8100});
    cfg.setTaskExecutionTimeout(30L * 60 * 1000);
    cfg.setTaskQueueTimeout(24L * 60 * 60 * 1000);
    officeManager = cfg.buildOfficeManager();
    officeManager.start();
}

public static void stopService() {
    if (officeManager != null) officeManager.stop();
}

kkFileView

kkFileView provides a rich set of preview formats (PDF, Office, images, etc.). Installation steps on macOS/Linux:

Install Java (e.g., brew install java) and set JAVA_HOME in .zshrc: export JAVA_HOME=$(/usr/libexec/java_home) Install Maven ( brew install mvn) and verify with mvn -v.

Install LibreOffice ( brew install libreoffice) – required for document conversion.

Clone the repository github.com/kekingcn/kkFileView and build: mvn clean install -DskipTests Run the generated JAR (or start via IDE) and open the web UI (default address printed in the console).

OnlyOffice

OnlyOffice offers a community edition (free) and enterprise editions (paid). Official site: www.onlyoffice.com/zh. Source code is hosted at github.com/ONLYOFFICE. The community edition supports collaborative editing of DOCX, XLSX and PPTX; the enterprise edition adds more file‑type support and advanced features.

Recommendations

For public, non‑confidential files, the simplest approach is Microsoft Office Online via view.officeapps.live.com.

If confidentiality and stability are required and budget permits, consider Alibaba Cloud IMM.

When server resources are available, server‑side conversion (OpenOffice/JODConverter, kkFileView, or OnlyOffice) provides the most complete preview experience.

Without server infrastructure, front‑end libraries (PDF.js, docx‑preview, @vuelidate/xlsx) enable zero‑cost client‑side rendering.