vue-office

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.