Fully Open‑Source Vue‑Office: One‑Minute Online Preview for Word, Excel, PDF, and PPT

Problem

A project required online preview for Word, PDF, Excel and PPT documents. An inexperienced developer spent a week without success, while a senior developer solved the task in half a day by reusing an existing component.

vue-office Overview

vue-office is a Vue 3 component library that renders Office documents (.docx, .xlsx, .pdf) directly in the browser, eliminating the need for any server‑side conversion.

Key Advantages

✅ Pure front‑end implementation, no backend conversion required

✅ Supports multiple formats (Word, Excel, PDF)

✅ Seamless integration with Vue 3

✅ Rich configuration options for each document type

✅ Actively maintained

Installation

# Install all packages
npm install @vue-office/docx @vue-office/excel @vue-office/pdf

# Or install on demand
npm install @vue-office/docx   # only Word
npm install @vue-office/excel # only Excel
npm install @vue-office/pdf   # only PDF

Basic Usage

<template>
  <div>
    <!-- Word -->
    <VueOfficeDocx :src="docxUrl" />

    <!-- Excel -->
    <VueOfficeExcel :src="excelUrl" />

    <!-- PDF -->
    <VueOfficePdf :src="pdfUrl" />
  </div>
</template>

<script setup>
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'

const docxUrl = '/document.docx'
const excelUrl = '/spreadsheet.xlsx'
const pdfUrl = '/document.pdf'
</script>

Supported Data Sources

Documents can be loaded from a URL, a base64 string, or a Uint8Array binary buffer fetched via an API.

<template>
  <VueOfficeDocx :src="docSource" />
</template>

<script setup>
import { ref } from 'vue'

// 1. URL
const urlSource = 'https://example.com/document.docx'

// 2. Base64
const base64Source = 'data:application/vnd.openxmlformats...'

// 3. Uint8Array binary data
const binarySource = ref(null)
fetch('/api/document')
  .then(res => res.arrayBuffer())
  .then(buffer => {
    binarySource.value = new Uint8Array(buffer)
  })
</script>

Component‑Specific Options

VueOfficeDocx (Word)

<template>
  <VueOfficeDocx
    :src="docxSrc"
    :options="options"
    :style="styles"
    @rendered="onRendered"
    @error="onError"
  />
</template>

<script setup>
const options = {
  styleMap: [
    "p[style-name='Heading 1'] => h1:fresh",
    "p[style-name='Heading 2'] => h2:fresh"
  ],
  includeEmbeddedStyleMap: true,
  includeDefaultStyleMap: true
}

const styles = {
  height: '800px',
  border: '1px solid #eee'
}

const onRendered = () => {
  console.log('Document rendered')
}
</script>

VueOfficeExcel (Excel)

<template>
  <VueOfficeExcel
    :src="excelSrc"
    :options="excelOptions"
    @rendered="onExcelRendered"
  />
</template>

<script setup>
const excelOptions = {
  language: 'zh-CN',
  readOnly: true,
  width: '100%',
  height: 500,
  rowHeaders: true,
  colHeaders: true,
  licenseKey: 'non-commercial-and-evaluation'
}
</script>

VueOfficePdf (PDF)

<template>
  <VueOfficePdf
    :src="pdfSrc"
    :options="pdfOptions"
    @rendered="onPdfRendered"
    @page-rendered="onPageRendered"
  />
</template>

<script setup>
const pdfOptions = {
  cMapUrl: 'https://cdn.jsdelivr.net/npm/[email protected]/cmaps/',
  cMapPacked: true,
  scale: 1.2,
  page: 1,
  enableTextSelection: true
}

const onPageRendered = pageNum => {
  console.log(`Page ${pageNum} rendered`)
}
</script>

File Upload Example

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <VueOfficeDocx v-if="fileData" :src="fileData" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const fileData = ref(null)

const handleFileChange = e => {
  const file = e.target.files[0]
  if (!file) return
  if (file.type.includes('word')) {
    fileData.value = file
  }
}
</script>

Multi‑Document Switching

<template>
  <div>
    <button @click="switchDoc('doc1')">Document 1</button>
    <button @click="switchDoc('doc2')">Document 2</button>
    <VueOfficeDocx :key="currentDoc" :src="currentDocUrl" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const currentDoc = ref('doc1')
const docs = {
  doc1: '/docs/document1.docx',
  doc2: '/docs/document2.docx'
}
const currentDocUrl = computed(() => docs[currentDoc.value])

const switchDoc = docId => {
  currentDoc.value = docId
}
</script>

Following these steps enables rapid implementation of online preview for Word, Excel, PDF and other Office documents directly in the browser, reducing server load and accelerating development.