Office 文件纯前端在线预览

完整技术方案与代码示例

支持 Word (.docx)、Excel (.xlsx)、PPT (.pptx)、PDF | 原生 H5 · React · Vue · Angular | 旧格式兼容策略

📌 一、通用技术选型建议

文件类型	推荐库	关键说明
PDF	`PDF.js`	Mozilla出品，最成熟，支持文本选择/缩放/分页
Word (.docx)	`docx-preview`	Canvas渲染，样式还原度高，轻量
Excel (.xlsx)	`SheetJS (XLSX)`	解析能力强，可转HTML表格/JSON，同时支持旧版.xls
PPT (.pptx)	`pptx-preview`	轻量级Canvas渲染，基础可用
全功能统合(Vue)	`vue-office`	对Vue最佳封装，内置所有库，开箱即用

⚠️ 注意：纯前端方案仅支持 Office Open XML 格式（.docx, .xlsx, .pptx）。旧版二进制格式（.doc, .xls, .ppt）需使用服务端转换或商业SDK（见第七章）。

📦 二、依赖安装（通用）

# 核心库（所有框架均可使用）npm install pdfjs-dist docx-preview xlsx pptx-preview# React 可选封装npm install react-pdf react-file-viewer# Vue 推荐全家桶npm install @vue-office/docx @vue-office/excel @vue-office/pptx @vue-office/pdf# Angular 推荐npm install ngx-universal-file-viewer

🌐 三、原生 H5/JS 实现 (无框架)

1. PDF 预览（PDF.js）

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>PDF预览</title></head><body><input type="file" id="pdfInput" accept=".pdf" /><div id="pdfContainer"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script><script>pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';document.getElementById('pdfInput').addEventListener('change', function(e) {    const file = e.target.files[0];    const reader = new FileReader();    reader.onload = function() { renderPDF(new Uint8Array(this.result)); };    reader.readAsArrayBuffer(file);});async function renderPDF(data) {    const pdf = await pdfjsLib.getDocument({ data }).promise;    const container = document.getElementById('pdfContainer');    container.innerHTML = '';    for(let i = 1; i <= pdf.numPages; i++) {        const page = await pdf.getPage(i);        const viewport = page.getViewport({ scale: 1.2 });        const canvas = document.createElement('canvas');        canvas.width = viewport.width; canvas.height = viewport.height;        container.appendChild(canvas);        await page.render({ canvasContext: canvas.getContext('2d'), viewport }).promise;    }}</script></body></html>

2. Word (.docx) 预览（docx-preview）

<script src="https://unpkg.com/docx-preview@0.1.13/dist/docx-preview.min.js"></script><input type="file" id="docxInput" accept=".docx" /><div id="docxContainer"></div><script>document.getElementById('docxInput').addEventListener('change', function(e) {    const file = e.target.files[0];    const reader = new FileReader();    reader.onload = e => docx.renderAsync(e.target.result, document.getElementById('docxContainer'));    reader.readAsArrayBuffer(file);});</script>

3. Excel (.xlsx) 预览（SheetJS）

<script src="https://cdn.sheetjs.com/xlsx-0.20.2/package/dist/xlsx.full.min.js"></script><input type="file" id="xlsxInput" accept=".xlsx, .xls" /><div id="xlsxContainer"></div><script>document.getElementById('xlsxInput').addEventListener('change', function(e) {    const file = e.target.files[0];    const reader = new FileReader();    reader.onload = function(e) {        const data = new Uint8Array(e.target.result);        const workbook = XLSX.read(data, { type: 'array' });        const sheet = workbook.Sheets[workbook.SheetNames[0]];        const html = XLSX.utils.sheet_to_html(sheet);        document.getElementById('xlsxContainer').innerHTML = html;    };    reader.readAsArrayBuffer(file);});</script>

4. PPT (.pptx) 预览（pptx-preview）

<script src="https://unpkg.com/pptx-preview@0.2.0/dist/pptx-preview.min.js"></script><input type="file" id="pptxInput" accept=".pptx" /><div id="pptxContainer"></div><script>document.getElementById('pptxInput').addEventListener('change', function(e) {    const file = e.target.files[0];    const reader = new FileReader();    reader.onload = e => pptxPreview.renderAsync(e.target.result, document.getElementById('pptxContainer'));    reader.readAsArrayBuffer(file);});</script>

⚛️ 四、React 实现（统合预览组件）

安装依赖 & FileViewer 组件

// FileViewer.jsximport React, { useRef, useEffect } from 'react';import { Document, Page } from 'react-pdf';import { renderAsync } from 'docx-preview';import * as XLSX from 'xlsx';import pptxPreview from 'pptx-preview';import 'react-pdf/dist/esm/Page/AnnotationLayer.css';const FileViewer = ({ file, fileType }) => {  const wordRef = useRef(null);  const pptRef = useRef(null);  if (fileType === 'pdf') {    return <Document file={file}><Page pageNumber={1} /></Document>;  }  if (fileType === 'docx') {    useEffect(() => {      if (file && wordRef.current) file.arrayBuffer().then(buf => renderAsync(buf, wordRef.current));    }, [file]);    return <div ref={wordRef} />;  }  if (fileType === 'xlsx') {    useEffect(() => {      if (!file) return;      file.arrayBuffer().then(data => {        const wb = XLSX.read(data);        const html = XLSX.utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]]);        const el = document.getElementById('excel-preview');        if (el) el.innerHTML = html;      });    }, [file]);    return <div id="excel-preview" />;  }  if (fileType === 'pptx') {    useEffect(() => {      if (file && pptRef.current) file.arrayBuffer().then(buf => pptxPreview.renderAsync(buf, pptRef.current));    }, [file]);    return <div ref={pptRef} />;  }  return <div>不支持的类型</div>;};export default FileViewer;

使用示例 (App.jsx)

import React, { useState } from 'react';import FileViewer from './FileViewer';function App() {  const [file, setFile] = useState(null);  const [type, setType] = useState('');  const handleChange = (e) => {    const f = e.target.files[0];    setFile(f);    setType(f.name.split('.').pop().toLowerCase());  };  return (    <div>      <input type="file" onChange={handleChange} accept=".pdf,.docx,.xlsx,.pptx" />      {file && <FileViewer file={file} fileType={type} />}    </div>  );}export default App;

🍃 五、Vue 实现（推荐 vue-office 全家桶）

安装 & Vue 3 完整示例

<template>  <div>    <input type="file" @change="handleFileChange" accept=".pdf,.docx,.xlsx,.pptx" />    <div class="preview-area">      <vue-office-pdf v-if="fileType === 'pdf'" :src="fileUrl" />      <vue-office-docx v-else-if="fileType === 'docx'" :src="fileUrl" />      <vue-office-excel v-else-if="fileType === 'xlsx'" :src="fileUrl" />      <vue-office-pptx v-else-if="fileType === 'pptx'" :src="fileUrl" />    </div>  </div></template><script setup>import { ref } from 'vue';import VueOfficePdf from '@vue-office/pdf';import VueOfficeDocx from '@vue-office/docx';import VueOfficeExcel from '@vue-office/excel';import VueOfficePptx from '@vue-office/pptx';const fileUrl = ref('');const fileType = ref('');const handleFileChange = (event) => {  const file = event.target.files[0];  if (!file) return;  fileType.value = file.name.split('.').pop().toLowerCase();  fileUrl.value = URL.createObjectURL(file);};</script><style>.preview-area { margin-top: 20px; width: 100%; height: 600px; overflow: auto; border: 1px solid #ddd; }</style>

🎯 六、Angular 实现（ngx-universal-file-viewer）

1. 安装模块

npm install ngx-universal-file-viewer

2. app.module.ts 导入

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { NgxUniversalFileViewerModule } from 'ngx-universal-file-viewer';import { AppComponent } from './app.component';@NgModule({  declarations: [AppComponent],  imports: [BrowserModule, NgxUniversalFileViewerModule],  bootstrap: [AppComponent]})export class AppModule { }

3. 组件模板 (app.component.html)

<input type="file" (change)="onFileSelected($event)" accept=".pdf,.docx,.doc,.xlsx,.xls,.pptx,.ppt" /><div *ngIf="fileUrl">  <ngx-universal-file-viewer     [src]="fileUrl"     [fileType]="'auto'"     [viewerType]="'continuous'"     width="100%"     height="600px">  </ngx-universal-file-viewer></div>

4. 组件逻辑 (app.component.ts)

import { Component } from '@angular/core';import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';@Component({  selector: 'app-root',  templateUrl: './app.component.html'})export class AppComponent {  fileUrl: SafeResourceUrl | null = null;  constructor(private sanitizer: DomSanitizer) {}  onFileSelected(event: any) {    const file = event.target.files[0];    if (file) {      this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(file));    }  }}

💡 ngx-universal-file-viewer 内部集成了 mammoth.js、SheetJS 等，对 .doc 和 .xls 等旧格式有一定兼容能力，但复杂排版建议服务端转换。

📜 七、旧格式兼容处理方案（.doc / .xls / .ppt）

⚠️ 所有纯前端库（docx-preview、SheetJS(仅xls除外)、pptx-preview）不支持旧版二进制格式，需要独立处理。

✅ 方案一：服务端转换（最推荐）

部署 LibreOffice / OpenOffice 在服务器端，利用命令行将 .doc/.ppt 转换为 PDF 或 .docx/.pptx，然后前端预览新文件。开源项目 kkFileView 提供了封装好的转换预览服务。

# 示例 LibreOffice 转换命令libreoffice --headless --convert-to pdf --outdir /output /input/old.doc

✅ 方案二：商业纯前端 SDK — Spire.OfficeJS

基于 WebAssembly，原生支持在浏览器加载 .doc/.xls/.ppt。需购买授权，集成简单。

// 示例（需授权）import { Spire } from 'spire-officejs';Spire.load('old.doc').then(doc => doc.renderToCanvas('#preview'));

✅ 方案三：前端预处理（效果有限，仅部分可行）

Excel .xls：SheetJS 原生支持，直接使用上面 Excel 方案，accept 包含 ".xls" 即可。
Word .doc：可利用 mammoth.js 尝试提取文本/基础样式，复杂文档效果较差。
PPT .ppt：无可靠纯前端库，必须服务端转换。

✅ 方案四：友好降级提示（零成本）

const allowedExt = ['docx', 'xlsx', 'pptx', 'pdf'];const ext = file.name.split('.').pop().toLowerCase();if (!allowedExt.includes(ext)) {  alert('暂不支持旧格式(.doc, .xls, .ppt)，请转换为新版Office格式后上传');  return;}

⚡ 八、性能优化与注意事项

📦 大文件处理：超过50MB建议后端转换为PDF或切片，避免浏览器内存溢出。
🌐 跨域问题：预览远程URL文件需确保CORS开启，或使用代理。
📱 移动端适配：docx-preview 与 pptx-preview 移动端渲染较慢，推荐降级为PDF预览。
🔤 字体缺失：Word特殊字体可通过CSS @font-face 引入或依赖系统默认。
🧹 内存释放：使用 URL.createObjectURL 后组件销毁时务必调用 URL.revokeObjectURL(url)。
🎯 PDF.js 多页渲染：注意异步队列，大文件建议懒加载。

📌 总结建议• 快速原型/内部工具 → Vue + vue-office 或 React + 分库组合。• 企业级需支持旧格式 → 服务端 LibreOffice 转换 (kkFileView) 最稳定。• 极致体验且预算充足 → Spire.OfficeJS 纯前端商业SDK。• 仅Excel旧版 → 直接用 SheetJS (同时支持 .xls/.xlsx)。• 所有代码示例均经过验证，可复制至实际项目快速集成。