js 实现docx在线预览

使用docx.js库解析并渲染DOCX文件

docx.js是一个纯JavaScript库，可以在浏览器中解析和渲染DOCX文件。它不需要后端支持，直接在浏览器中完成所有操作。

安装依赖：

npm install docx

示例代码：

import { Document, Packer, Paragraph, TextRun } from "docx";

async function previewDocx(file) {
  const arrayBuffer = await file.arrayBuffer();
  const docx = await Document.load(arrayBuffer);

  const htmlContent = docx.paragraphs.map(paragraph => {
    return `<p>${paragraph.children.map(child => child.text).join('')}</p>`;
  }).join('');

  document.getElementById('preview-container').innerHTML = htmlContent;
}

使用Mammoth.js转换DOCX为HTML

Mammoth.js是一个专门用于将DOCX转换为HTML的JavaScript库，支持保留基本格式和样式。

安装依赖：

npm install mammoth

基本用法：

import * as mammoth from "mammoth";

async function previewDocx(file) {
  const arrayBuffer = await file.arrayBuffer();
  const result = await mammoth.convertToHtml({ arrayBuffer });
  document.getElementById('preview-container').innerHTML = result.value;
}

使用Office Online Viewer嵌入预览

微软提供了Office Online Viewer服务，可以直接通过iframe嵌入预览DOCX文件。

实现方式：

function previewWithOfficeOnline(url) {
  const iframe = document.createElement('iframe');
  iframe.src = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url)}`;
  iframe.width = '100%';
  iframe.height = '500px';
  document.getElementById('preview-container').appendChild(iframe);
}

使用Google Docs Viewer嵌入预览

Google Docs也提供了类似的服务，可以通过URL直接预览DOCX文件。

实现代码：

function previewWithGoogleDocs(url) {
  const iframe = document.createElement('iframe');
  iframe.src = `https://docs.google.com/viewer?url=${encodeURIComponent(url)}&embedded=true`;
  iframe.width = '100%';
  iframe.height = '500px';
  document.getElementById('preview-container').appendChild(iframe);
}

使用PDF.js间接预览（先转换为PDF）

如果系统支持DOCX到PDF的转换，可以使用PDF.js来预览转换后的PDF。

实现步骤：

// 假设已有将DOCX转换为PDF的服务
async function previewAsPdf(docxUrl) {
  const pdfUrl = await convertDocxToPdf(docxUrl);
  const loadingTask = pdfjsLib.getDocument(pdfUrl);
  const pdf = await loadingTask.promise;

  const page = await pdf.getPage(1);
  const viewport = page.getViewport({ scale: 1.0 });

  const canvas = document.getElementById('pdf-canvas');
  const context = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;

  const renderContext = {
    canvasContext: context,
    viewport: viewport
  };

  await page.render(renderContext).promise;
}

注意事项

每种方法都有其优缺点。纯前端解决方案可能在处理复杂格式时有限制，而使用在线服务需要考虑隐私和网络延迟问题。对于商业应用，建议评估文档的敏感性和预览功能的完整性需求。

浏览器兼容性也是重要考虑因素，特别是对于较旧的浏览器可能需要polyfill或备用方案。性能方面，大文档可能需要分页加载或虚拟滚动优化。