# word插件

**Repository Path**: ldesign/ldesign-word

## Basic Information

- **Project Name**: word插件
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-09
- **Last Updated**: 2026-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @ldesign/word
> 基于 `docx-preview` 的 Vue 3 Word（`.docx`）预览组件，支持组件、Hook、指令和原生引擎四种接入方式。
## 特性
- 支持 URL、`ArrayBuffer`、`Uint8Array`、`File`、`Blob` 多种文档源
- 内置工具栏（翻页、缩放、搜索、下载、打印、全屏、统计）
- 支持批注面板、修订显示、大纲导航、拖放加载
- 提供 `LDesignWord`、`useWord`、`v-word`、`WordEngine` 多层 API
- 支持中英文界面与水印能力，适合业务系统集成
## 安装
```bash
pnpm add @ldesign/word
```
如果项目中还未安装对等依赖，请补充安装：
```bash
pnpm add @ldesign/desktop-style @ldesign/desktop-utils
```
## 快速开始
### 1) 全局注册
```ts
import LDesignWord from '@ldesign/word'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.use(LDesignWord)
app.mount('#app')
```
### 2) 组件方式
```vue
<template>
  <LDesignWord
    src="/word/test.docx"
    height="600px"
    :toolbar="true"
    @loaded="onLoaded"
  />
</template>

<script setup lang="ts">
import { LDesignWord } from '@ldesign/word'

function onLoaded(payload: { pageCount: number }) {
  console.log('页数:', payload.pageCount)
}
</script>
```
### 3) Hook 方式（自定义 UI）
```vue
<template>
  <div class="toolbar">
    <button @click="zoomOut">-</button>
    <span>{{ state.zoom.value }}%</span>
    <button @click="zoomIn">+</button>
  </div>
  <div ref="containerRef" style="height: 560px" />
</template>

<script setup lang="ts">
import { useWord } from '@ldesign/word'

const { containerRef, state, zoomIn, zoomOut } = useWord({
  src: '/word/test.docx',
  toolbar: false,
})
</script>
```
### 4) 指令方式
```vue
<template>
  <div v-word="'/word/test.docx'" style="height: 560px" />
</template>
```
### 5) 原生 JS 引擎
```ts
import { WordEngine } from '@ldesign/word'

const engine = new WordEngine({
  src: '/word/test.docx',
  toolbar: false,
})

await engine.mount('#word-viewer')
```
## 常用事件
- `loaded`: 文件加载完成
- `zoom-change`: 缩放变化
- `scroll`: 页码/滚动变化
- `error`: 加载异常
- `search`: 搜索结果
- `drop`: 拖放文件
- `selection-change`: 文本选中变化
## 文档与示例
- 快速开始：`docs/getting-started.md`
- API 参考：`docs/api-reference.md`
- 使用示例：`docs/usage-examples.md`
- 完整示例源码：`src/word/_example/`
## License
ISC