SpreadsheetPreview

SpreadsheetPreview is PDF.js for spreadsheets: a JavaScript/TypeScript component for previewing Excel XLSX files directly in the browser.

It is view-only, client-side, and designed for SaaS products and enterprise software. No server required. No file transfer required for local files. No Microsoft Office dependency.

Getting Started

Install the package from npm:

npm install @datagridxl/spreadsheet-preview

Render a workbook from a URL:

<div id="preview"></div>

<script type="module">
  import SpreadsheetPreview from "@datagridxl/spreadsheet-preview";

  const preview = new SpreadsheetPreview(
    document.getElementById("preview"),
    {
      file: "/files/workbook.xlsx",
      height: "640px",
      theme: "light",
    },
  );

  await preview.ready;
</script>

Use Cases

• Preview spreadsheets selected or provided by customers
• Show generated reports before download
• Embed workbook previews in dashboards, portals, and admin tools
• Let users inspect spreadsheets without leaving your app
• Support CMS pages or framework islands with a Web Component

Why SpreadsheetPreview

• No upload flow required: local files can stay in the browser.
• No Excel required: render previews without Microsoft Office or Excel Online.
• Built for web apps: simple constructor API, Web Component integration, and React/Vue adapters.
• Workbook previews: virtual scrolling, multi-sheet workbooks, frozen panes, floating images, and cached formula values.

Constructor API

Use the constructor API when you control the page or app JavaScript. This is the primary integration path.

import SpreadsheetPreview from "@datagridxl/spreadsheet-preview";

const preview = new SpreadsheetPreview(container, {
  file: "/files/workbook.xlsx",
  height: 640,
  theme: "light",
});

await preview.ready;

You can also render a local File object:

const preview = new SpreadsheetPreview(container, {
  file: fileInput.files?.[0],
  height: "640px",
});

Options

• file: A workbook URL, File, Blob, ArrayBuffer, or typed array.
• height: Viewer height as a number of pixels or any CSS size string.
• theme: "light" or "dark".
• themeSwitcher: Set to true to show the built-in theme switcher.
• commercialLicense: Set to true after buying a commercial license to hide the community badge.

Global Script

Use the global build when you are not using a bundler:

<script src="/dist/spreadsheetpreview.script.js"></script>
<div id="preview"></div>

<script>
  new SpreadsheetPreview(document.getElementById("preview"), {
    file: "/files/workbook.xlsx",
    height: "640px",
  });
</script>

Web Component

Use the Web Component when declarative HTML is a better fit, such as CMS pages, framework islands, or Angular, Svelte, Solid, and Astro integrations.

<script type="module" src="/dist/spreadsheetpreview.esm.js"></script>

<spreadsheet-preview
  file="/files/workbook.xlsx"
  height="640px"
  theme="light"
  commercial-license
></spreadsheet-preview>

React

Use the React adapter when you want a component-shaped integration:

import SpreadsheetPreview from "@datagridxl/spreadsheet-preview/react";

export function WorkbookPreview() {
  return (
    <SpreadsheetPreview
      file="/files/workbook.xlsx"
      height="640px"
      theme="light"
    />
  );
}

Vue

Use the Vue adapter in Vue 3 apps:

<script setup lang="ts">
import SpreadsheetPreview from "@datagridxl/spreadsheet-preview/vue";
</script>

<template>
  <SpreadsheetPreview
    file="/files/workbook.xlsx"
    height="640px"
    theme="light"
  />
</template>

Angular, Svelte, Solid, and Astro

Use the constructor API when that fits your app architecture. Use the Web Component integration when declarative templates are easier:

import "@datagridxl/spreadsheet-preview";

<spreadsheet-preview
  file="/files/workbook.xlsx"
  height="640px"
></spreadsheet-preview>

See Framework Integration for more examples.

Licensing

Community builds show a small "Powered by SpreadsheetPreview" badge. It fades out while the user scrolls and returns when scrolling stops.

Commercial embeds can remove the badge by passing commercialLicense: true. This setting is a technical declaration; it does not grant a commercial license by itself.

new SpreadsheetPreview(container, {
  file: "/files/workbook.xlsx",
  commercialLicense: true,
});

Commercial licenses are per product. A SpreadsheetPreview license does not grant rights to use DataGridXL, DataGrid Toolkit, or any other DataGridXL product.

See LICENSE.md for license terms and the pricing page for commercial plans.