jvs-docx-ui

基于 Vue 3 + TypeScript + Vite + docxjs (docx-preview) 构建的 Word (.docx) 文档预览组件库，同时支持 独立站点部署 与 Vue 3 插件 NPM 发布。

1. 开发与构建指令

# 安装依赖
pnpm install

# 启动本地开发调试 (支持 0.0.0.0 局域网访问)
pnpm dev

# 构建可独立部署的 Web 应用（产物位于 dist/app）
pnpm build

# 构建可发布的 Vue 3 插件库（产物位于 dist/lib，包含 ES/UMD 与 .d.ts 类型声明）
pnpm build:lib

2. 支持的文档加载方式

方式一：作为 Vue 3 插件通过 Props 直接传入文件链接或文件流

<JvsDocx /> 同时支持 fileUrl、url、src、fileContent、v-model 绑定远程/本地链接、File、Blob、ArrayBuffer、Uint8Array 或 Base64 字符串：

<script setup lang="ts">
import { ref } from 'vue'
import { JvsDocx } from 'jvs-docx-ui'
import 'jvs-docx-ui/style.css'

const docUrl = ref('https://example.com/files/contract.docx')
const headers = { Authorization: 'Bearer xxx' }
</script>

<template>
  <div style="height: 100vh">
    <JvsDocx :file-url="docUrl" :request-headers="headers" />
  </div>
</template>

方式二：通过组件 Ref 实例方法主动加载（链接或本地文件）

<script setup lang="ts">
import { ref } from 'vue'
import { JvsDocx, type JvsDocxExpose } from 'jvs-docx-ui'
import 'jvs-docx-ui/style.css'

const docxRef = ref<JvsDocxExpose | null>(null)

// 1. 通过文件 URL 链接加载（支持自定义请求头）
async function loadByUrl(url: string) {
  await docxRef.value?.loadFromUrl(url, {
    fileName: '技术协议.docx',
    headers: { Authorization: 'Bearer xxx' }
  })
}

// 2. 通过本地 File / Blob / ArrayBuffer / Base64 加载
async function onFileChange(e: Event) {
  const file = (e.target as HTMLInputElement).files?.[0]
  if (file) {
    await docxRef.value?.importDocxFile(file, file.name)
  }
}

// 3. 导出当前预览的 .docx 文件
async function onExport() {
  await docxRef.value?.exportDocxFile('导出文档.docx', true)
}
</script>

<template>
  <div style="height: 600px">
    <JvsDocx ref="docxRef" />
  </div>
</template>

方式三：独立站点部署模式下的外部传参加载

1. URL 查询参数自动加载： 直接访问 http://your-host/?fileUrl=https://example.com/demo.docx&fileName=示例文档.docx（或 ?url=...），页面挂载后会自动拉取链接并渲染预览。
2. 顶部工具栏链接输入： 在顶部工具栏输入框中粘贴 .docx 链接并点击「加载链接」或按回车即可预览。
3. iframe postMessage 通信加载：

   iframeWindow.postMessage({
     type: 'jvs-docx:load',
     fileUrl: 'https://example.com/demo.docx',
     fileName: '示例文档.docx',
     headers: { Authorization: 'Bearer xxx' }
   }, '*')