docx.md

DOCX 使用指南

DocxViewer 支持 .docx、.docm、.dotx 和 .dotm。宏文档和宏模板只用于安全预览，VBA 不会执行；模板按普通文档打开。DocxEditor 的原格式编辑和宏保留不在本次支持范围内。

查看文档

<script setup lang="ts">
import { DocxViewer } from "@arcships/vue-docx"
import "@arcships/vue-docx/style.css"
</script>

<template>
  <DocxViewer
    :file="bytes"
    file-name="contract.docx"
    :show-toolbar="true"
    @load-success="onLoaded"
    @load-error="onError"
  />
</template>

DocxViewer 可以接收 file: ArrayBuffer，也可以直接接收已经解析的 model: DocModel。两者同时提供时优先使用 model。

常用属性：

属性	类型	默认值	说明
file	ArrayBuffer	无	DOCX、DOCM、DOTX 或 DOTM 字节
model	DocModel	无	已解析文档模型
runtime	DocxRuntime	组件创建	调用方持有的 Runtime
showToolbar	boolean	true	显示查看工具栏
showUpload	boolean	true	上传入口，含工具栏按钮与空态、错误态的选择文件按钮
showDownload	boolean	true	工具栏下载按钮
defaultThumbnailsOpen	boolean	false	默认展开缩略图
defaultZoom	number	100	初始缩放百分比
isDark	boolean	false	深色界面
showTrackedChanges	boolean | null	null	受控显示修订
showComments	boolean | null	null	受控显示批注

主要事件为 load-start、load-success、load-error、file-selected、update:isDark、update:showTrackedChanges 和 update:showComments。

编辑文档

<DocxEditor
  :file="bytes"
  :editable="true"
  :show-toolbar="true"
  :show-thumbnails="true"
  @load-error="onError"
/>

DocxEditor 可以自己创建编辑控制器，也可以通过 editor 传入 useDocxEditor() 返回的控制器。传入控制器适合把保存、撤销重做和业务按钮放到组件外部。

直接使用核心能力

纯数据操作从 @arcships/docx-core/core 导入；需要加载文件、Worker 和 WASM 时使用 @arcships/docx-core/runtime。

import { createDocxRuntime } from "@arcships/docx-core/runtime"

const runtime = createDocxRuntime()
try {
  const result = await runtime.loadSource({ kind: "bytes", bytes })
  console.log(result.model)
} finally {
  runtime.dispose()
}

不要直接组合已经标记弃用的页面、段落、表格和工具栏组件。它们只为 0.x 兼容保留，新代码使用 DocxViewer 或 DocxEditor。