Vue Export Word 工具库

一个简单易用的 Vue2 导出 Word 文档的工具库，基于 docx 和 file-saver 实现。

特性

• 支持 Vue2
• 简单易用的 API
• 自定义文件名和内容
• 提供对话框界面
• 支持事件回调

安装

npm install vue-exportword-tools

使用方法

1. 作为 Vue 插件使用

import Vue from 'vue';
import VueExportWord from 'vue-exportword-tools';

// 安装插件
Vue.use(VueExportWord);

// 在模板中使用
<template>
  <div>
    <button @click="showExportModal = true">导出Word</button>

    <ExportWord 
      :visible.sync="showExportModal" 
      :default-filename="'我的文档'" 
      :default-content="'这是文档内容'"
      @success="handleExportSuccess"
      @error="handleExportError"
      @cancel="handleCancel"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showExportModal: false
    };
  },
  methods: {
    handleExportSuccess(message) {
      console.log('导出成功:', message);
    },
    handleExportError(message) {
      console.error('导出失败:', message);
    },
    handleCancel() {
      console.log('用户取消了导出操作');
    }
  }
};
</script>

2. 通过原型方法使用

import Vue from 'vue';
import VueExportWord from 'vue-exportword-tools';

// 安装插件
Vue.use(VueExportWord);

// 在组件中使用
export default {
  methods: {
    exportWord() {
      this.$exportWord({
        defaultFilename: '我的文档',
        defaultContent: '这是文档内容',
        success: (message) => {
          console.log('导出成功:', message);
        },
        error: (message) => {
          console.error('导出失败:', message);
        },
        cancel: () => {
          console.log('用户取消了导出操作');
        }
      });
    }
  }
};

3. 在 Vue 项目中使用

import { ExportWord } from 'vue-exportword-tools';

export default {
  components: {
    ExportWord
  },
  data() {
    return {
      showExportModal: false
    };
  }
};

API

Props

| 属性名 | 类型 | 默认值 | 描述 | |--------|------|--------|------| | visible | Boolean | false | 控制对话框的显示与隐藏 | | defaultFilename | String | 'document' | 默认文件名 | | defaultContent | String | '' | 默认内容 |

事件

| 事件名 | 参数 | 描述 | |--------|------|------| | success | (message: String) | 导出成功时触发 | | error | (message: String) | 导出失败时触发 | | cancel | - | 用户取消操作时触发 | | update:visible | (visible: Boolean) | 更新对话框可见性时触发 |

示例

项目中的 example.html 文件提供了一个完整的示例，您可以直接在浏览器中打开它来查看效果。

构建

# 安装依赖
npm install

# 开发模式构建
npm run dev

# 生产模式构建
npm run build

许可证

MIT