当前位置：首页 > VUE

vue实现word在线

2026-01-14 04:22:23VUE

Vue 实现 Word 在线编辑与预览

使用 docx.js 库解析和生成 Word 文档

docx.js 是一个纯 JavaScript 库，可以在浏览器中生成和操作 Word 文档（.docx 格式）。安装依赖：

npm install docx

生成 Word 文档示例代码：

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

const generateDocx = async () => {
  const doc = new Document({
    sections: [{
      children: [
        new Paragraph({
          children: [new TextRun("Hello World")],
        }),
      ],
    }],
  });
  const blob = await Packer.toBlob(doc);
  saveAs(blob, "example.docx");
};

集成 Mammoth.js 实现 Word 转 HTML 预览

Mammoth.js 可将 .docx 文件转换为 HTML，便于在网页中预览内容：

vue实现word在线

npm install mammoth

转换代码示例：

import mammoth from "mammoth";

const previewDocx = (file) => {
  const reader = new FileReader();
  reader.onload = (event) => {
    mammoth.extractRawText({ arrayBuffer: event.target.result })
      .then((result) => {
        document.getElementById("preview").innerHTML = result.value;
      });
  };
  reader.readAsArrayBuffer(file);
};

使用 Office Web 365 或 OnlyOffice 嵌入在线编辑

对于企业级应用，可嵌入第三方在线编辑器：

vue实现word在线

Office Web 365：通过 iframe 嵌入服务

<iframe src="https://ow365.cn/?i=YOUR_APP_ID&furl=文档URL" />

OnlyOffice：需部署后端服务，前端集成示例：

const config = {
document: {
 fileType: "docx",
 key: "unique_key",
 title: "document.docx",
 url: "文档下载URL",
},
editorConfig: {
 callbackUrl: "保存回调URL",
},
};
new DocsAPI.DocEditor("editor", config);

实现文件上传与下载功能

通过 Vue 文件上传组件处理用户操作：

<template>
  <input type="file" @change="handleFileUpload" accept=".docx" />
  <button @click="downloadDocx">下载</button>
</template>

<script>
export default {
  methods: {
    handleFileUpload(e) {
      const file = e.target.files[0];
      previewDocx(file); // 调用预览方法
    },
    downloadDocx() {
      generateDocx(); // 调用生成方法
    },
  },
};
</script>