Complete Frontend Guide to Previewing DOCX, PPTX, XLSX, and PDF Files

Commercial preview services

Microsoft Office Online Viewer : URL template

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

. Supports DOCX, PPTX, XLSX with high fidelity and animation. Free with a 10 MB file limit. Stability unclear.

Google Drive Viewer : URL template

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

. Supports DOCX, PPTX, XLSX, PDF up to 25 MB. PPTX rendering lacks animations and has minor style issues.

Alibaba Cloud IMM : Paid service (documentation at help.aliyun.com/document_de…) with enterprise‑grade reliability.

XDOC : Public preview endpoint at view.xdocin.com/view-xdocin…; users must evaluate suitability.

Office Web 365 : Non‑Microsoft provider offering a preview service (website www.officeweb365.com/).

WPS Open Platform : Paid offering (website solution.wps.cn/) with published pricing.

Front‑end preview solutions

PPTX

No actively maintained open‑source viewer; the author parses the Office Open XML format using jszip:

import JSZip from 'jszip'
const zip = await JSZip.loadAsync(pptxData)
// Parse [Content_Types].xml, presentation.xml, etc.

Parsing steps:

Read [Content_Types].xml to list parts.

Extract slide information from ppt/presentation.xml.

Load theme via ppt/_rels/presentation.xml.rels.

Render the result to HTML or Canvas.

Key parsing functions (excerpt):

const filesInfo = await getContentTypes(zip)
async function getContentTypes(zip) {
  const ContentTypesJson = await readXmlFile(zip, '[Content_Types].xml')
  const subObj = ContentTypesJson['Types']['Override']
  const slidesLocArray = []
  const slideLayoutsLocArray = []
  for (let i = 0; i < subObj.length; i++) {
    switch (subObj[i]['attrs']['ContentType']) {
      case 'application/vnd.openxmlformats-officedocument.presentationml.slide+xml':
        slidesLocArray.push(subObj[i]['attrs']['PartName'].substr(1))
        break
      case 'application/vnd.openxmlformats-officedocument.presentationml.slideLayout+xml':
        slideLayoutsLocArray.push(subObj[i]['attrs']['PartName'].substr(1))
        break
      default:
    }
  }
  return { slides: slidesLocArray, slideLayouts: slideLayoutsLocArray }
}

Slide size extraction:

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

Theme loading (excerpt):

async function loadTheme(zip) {
  const preResContent = await readXmlFile(zip, 'ppt/_rels/presentation.xml.rels')
  const relationshipArray = preResContent['Relationships']['Relationship']
  let themeURI
  if (relationshipArray.constructor === Array) {
    for (let i = 0; i < relationshipArray.length; i++) {
      if (relationshipArray[i]['attrs']['Type'] ===
          'http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme') {
        themeURI = relationshipArray[i]['attrs']['Target']
        break
      }
    }
  } else if (relationshipArray['attrs']['Type'] ===
      'http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme') {
    themeURI = relationshipArray['attrs']['Target']
  }
  if (!themeURI) throw Error("Can't open theme file.")
  return readXmlFile(zip, 'ppt/' + themeURI)
}

PDF

Native preview using <iframe src="viewFileUrl"/> or <embed src="..."/>, relying on the browser’s built‑in PDF support.

Advanced rendering with pdf.js (npm package pdfjs-dist). Requires Node ≥18. Example usage is provided in the source repository.

DOCX

Render with the npm package docx-preview:

import { renderAsync } from 'docx-preview'
export const renderDocx = async (options) => {
  const { bodyContainer, styleContainer, buffer, docxOptions = {} } = options
  const defaultOptions = { className: 'docx', ignoreLastRenderedPageBreak: false }
  const config = Object.assign({}, defaultOptions, docxOptions)
  if (bodyContainer) {
    return renderAsync(buffer, bodyContainer, styleContainer, config)
  }
  const container = document.createElement('div')
  document.body.appendChild(container)
  return renderAsync(buffer, container, styleContainer, config)
}

XLSX

Use the npm package @vu… (supports Vue 2, Vue 3, and plain JavaScript). The author considers it the most usable solution for spreadsheet preview.

Framework‑agnostic web component

The parsers above are packaged into a custom element <preview> (MIT‑licensed). It can be used like a regular <div> tag in any front‑end framework.

Server‑side preview solutions

OpenOffice conversion

Java code using JODConverter converts documents to PDF:

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

Service start/stop configuration (excerpt):

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

kkFileView

Java project requiring Java, Maven, and LibreOffice. Installation steps on macOS:

Install Java: brew install java Install Maven: brew install mvn Install LibreOffice: brew install libreoffice Set JAVA_HOME in .zshrc (e.g., export JAVA_HOME=$(/usr/libexec/java_home)) and reload the shell.

Build the project, skipping tests: mvn clean install -DskipTests Run the main class (e.g., via VS Code Run) and access the provided HTTP endpoint.

Repository: github.com/kekingcn/kkFileView (reference [23]).

onlyOffice

Commercial product with a free developer/community edition. Supports the Office suite and multi‑user editing. Official site www.onlyoffice.com/zh; source code at github.com/ONLYOFFICE.

Summary

For publicly available files, the Microsoft viewer ( view.officeapps.live.com/op/view.aspx) offers the simplest integration.

If confidentiality and stability are required and budget permits, Alibaba Cloud IMM is a viable paid option.

Server‑side solutions (OpenOffice conversion, kkFileView, onlyOffice) provide the most complete rendering results.

When no server is available and cost‑free operation is needed, front‑end solutions render DOCX, PDF, and XLSX entirely in the browser; PPTX requires custom parsing as demonstrated.