explaingit

501351981/vue-office

5,582JavaScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A JavaScript library for Vue (and plain JS or React) that lets you display Word, Excel, PDF, and PowerPoint files directly in the browser without the user needing to download anything or open a separate app.

Mindmap

mindmap
  root((repo))
    Supported formats
      Word docx
      Excel spreadsheets
      PDF documents
      PowerPoint slides
    Frameworks
      Vue 2 and Vue 3
      React plain JavaScript
    File sources
      URL from web
      Raw binary from API
    Rendering libraries
      docx-preview
      pdf.js exceljs
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add an in-browser Word document viewer to a Vue 3 app so users can read .docx files without downloading them.

USE CASE 2

Display Excel spreadsheets inline on a page, accepting either a file URL or raw binary data from an API response.

USE CASE 3

Show PowerPoint slide decks in a React or plain JavaScript project using this library's non-Vue compatibility mode.

USE CASE 4

Build a document management portal where users upload files and preview them instantly in the browser without any backend conversion.

Tech stack

JavaScriptVuepdf.jsdocx-previewexceljs

Getting it running

Difficulty · easy Time to first run · 30min

Install only the package for the file type you need, each component accepts a URL or binary data with no backend required.

In plain English

vue-office is a JavaScript library that lets you display Word documents, Excel spreadsheets, PDFs, and PowerPoint files directly inside a web page, without requiring the user to download anything or open a separate application. It works as a set of components for the Vue framework (both the older version 2 and the newer version 3), and it also supports non-Vue projects, so plain JavaScript or React apps can use it as well. The library is split into separate packages by file type, so you only install the pieces you need. Showing a Word file takes one package, showing a spreadsheet takes another, and so on. Each component accepts a file source: either a web URL pointing to the file, or the raw binary data of the file if you are loading it from an API response or letting the user pick one from their computer. Internally, each file type uses a different third-party rendering library chosen for its quality with that format. Word previews rely on docx-preview, PDF rendering uses pdf.js with a virtual list for better performance on long documents, Excel support is built on exceljs and x-data-spreadsheet for broader spreadsheet style coverage, and PowerPoint previews use a custom library developed by the same author. The project was created and is maintained by a solo developer. The README notes that since late 2024 the author may be slower to respond to issues, given the pressures of being an independent developer. The project accepts donations and the author also sells a paid guide about writing high-quality front-end code. If the README is sparse on English-language detail, that is because most of the documentation is written in Chinese. The core idea is straightforward: add a component tag to your Vue template, point it at a file, and the library handles rendering it in the browser.

Copy-paste prompts

Prompt 1
Set up the vue-office Word component in a Vue 3 app to display a .docx file fetched from an API endpoint and show a loading spinner while it renders.
Prompt 2
Show me how to use vue-office's Excel component to render a spreadsheet from a Blob object returned by a file input element in a Vue 3 app.
Prompt 3
Add a PDF viewer to a Vue 2 app using vue-office that paginates a 50-page document efficiently using the built-in virtual list.
Prompt 4
Configure vue-office to display a PowerPoint file in a plain JavaScript app without using Vue, show me the minimal setup required.
Open on GitHub → Explain another repo

← 501351981 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.