zaki-dxp-office-preview

在 Vue 2 / Vue 3 下一套 API 预览 Word（docx）、Excel（xlsx）、PPT（pptx）。底层依赖 @vue-office 与 vue-demi，本包只做统一封装与样式入口。

TypeScript 与纯 JavaScript 项目均可使用：发布产物含 ESM（import）与 CommonJS（require），并带 .d.ts 类型声明（JS 里也能享受编辑器提示）。

安装

npm install zaki-dxp-office-preview [email protected]

项目使用的 Vue 主版本 需与依赖一致。若使用 Vue 2.6 及以下，还需：

npm install @vue/composition-api

安装完成后，各 @vue-office/* 的 postinstall 会按当前环境切换构建产物；若切换异常，可删除 node_modules 后重装。

样式

入口已打包 docx / excel 所需样式；请额外引入本包 CSS（pptx 无独立样式文件）。

ESM（Vite / 现代打包工具）：

import "zaki-dxp-office-preview/style.css";

CommonJS：

require("zaki-dxp-office-preview/style.css");

（若构建工具不支持对 css 使用 require，请在入口 HTML 或配置里引入 node_modules/zaki-dxp-office-preview/dist/style.css。）

使用（Vue 3 + <script setup>，纯 JS）

<template>
  <ZakiDocxPreview :src="docxUrl" style="height: 80vh" @rendered="onOk" @error="onErr" />
  <ZakiExcelPreview :src="xlsxUrl" style="height: 80vh" />
  <ZakiPptxPreview :src="pptxUrl" style="height: 80vh" />
  <ZakiOfficePreview type="docx" :src="docxUrl" style="height: 40vh" />
</template>

<script setup>
import {
  ZakiDocxPreview,
  ZakiExcelPreview,
  ZakiPptxPreview,
  ZakiOfficePreview,
} from "zaki-dxp-office-preview";
import "zaki-dxp-office-preview/style.css";

const docxUrl = "https://example.com/demo.docx";
const xlsxUrl = "https://example.com/demo.xlsx";
const pptxUrl = "https://example.com/demo.pptx";

function onOk() {
  console.log("rendered");
}
function onErr(e) {
  console.error(e);
}
</script>

使用（Vue 2 / Vue 3，选项式 API + 纯 JS）

<template>
  <ZakiDocxPreview :src="docx" style="height: 80vh" />
</template>

<script>
import { ZakiDocxPreview } from "zaki-dxp-office-preview";
import "zaki-dxp-office-preview/style.css";

export default {
  components: { ZakiDocxPreview },
  data() {
    return {
      docx: "https://example.com/demo.docx",
    };
  },
};
</script>

使用 TypeScript

将 <script setup> 写成 lang="ts" 即可，类型从包内导出（如 ZakiOfficeKind、ZakiOfficeSrc）。

全局注册

ESM：

import { createApp } from "vue";
import ZakiOfficePreviewPlugin from "zaki-dxp-office-preview";
import "zaki-dxp-office-preview/style.css";

const app = createApp(App);
app.use(ZakiOfficePreviewPlugin);

CommonJS（例如部分 Webpack / Vue CLI 配置）：

const pkg = require("zaki-dxp-office-preview");
const ZakiOfficePreviewPlugin = pkg.default || pkg;
require("zaki-dxp-office-preview/style.css");

// Vue 3
const { createApp } = require("vue");
const app = createApp(App);
app.use(ZakiOfficePreviewPlugin);

Vue 2：Vue.use(require("zaki-dxp-office-preview").default)。

说明： 本库依赖的 @vue-office/* 面向浏览器环境。请在 打包进前端 的流程里使用 require；不要在 纯 Node里直接 require 本包做 SSR 直跑（会缺少 window，除非自行做 mock）。

src 说明

与 vue-office 一致：支持文档 URL 字符串、ArrayBuffer 或 Blob（如上传、接口二进制）。

许可

MIT。底层库许可见 @vue-office/* 仓库。