Excel组件文档

仅支持 vue 项目使用

安装

使用 npm

$ npm install excel-jiniu

使用 yarn

$ yarn add excel-jiniu

用法

在 main.js 中引入

import Vue from 'vue'
import ExcelInstall from 'excel-jiniu'
import 'excel-jiniu/excel.style.css'

Vue.use(ExcelInstall)

test.vue/test.tsx文件中使用

<ExcelJN :config="config" ref="excelRef"></ExcelJN>
<script setup>
import { ref, nextTick } from "vue";
// import ExcelJN from "./views/index.vue";

const excelRef = ref();
const excelData = ref();
const config = ref({
  wsUrl: `ws://127.0.0.1:7001/ws?excel/${知识库名}/${文件名}`,
  data: {},
});

const getExcelData = () => {
  const params = {
    id: "96d72cbb-6635-107b-de35-2a2cced7c62d",
  };
  fetch("http://127.0.0.1:7001/excel/getExcel", {
    method: "POST",
    body: JSON.stringify(params),
    headers: {
      token: "uItiVZDpgQHVTzFHWUdDzqyCgTsaXezm1724846619",
      "content-type": "application/json",
    },
  })
    .then((res) => res.json())
    .then((res) => {
      excelData.value = res.data;
      formatData(res.data);
    });
};

// 接口数据格式化为excel初始化数据格式
const formatData = (data) => {
  const workbook = {
    id: data.id,
    name: data.title,
    sheetOrder: data.sheetOrder || [],
    sheets: {},
    styles: {},
  };

  if (Array.isArray(data.sheets)) {
    data.sheets.forEach((item) => {
      const worksheet = {
        id: item.id,
        name: item.name,
        color: item.color,
        hide: item.hide,
        columnCount: item.columnCount,
        rowCount: item.rowCount,
        cellData: item.cellData,
        mergeData: item.mergeData,
      };
      workbook.sheets[item.id] = worksheet;
    });
  }

  config.value.data = workbook;

  nextTick(() => {
    // 初始化excel组件
    excelRef.value?.init();
  });
};

getExcelData();
</script>

配置参数

• **WorkbOOK **

参数|是否必填|类型|描述|默认值 -|:-:|-|-|- appVersion|否|string|版本|0.2.12 id|是|string|工作簿id|- locale|否|string|语音|zh_CN name|是|string|工作簿名称|- resources|否|Resources[]|存储插件相关数据|undefined sheetOrder|是|string[]|sheet页id顺序|[] sheets|是|Record<string, Worksheet>|sheet页数据|{} styles|是|Style|样式|undefined

• Worksheet

参数|是否必填|类型|描述|默认值 -|-|-|-|- id|是|string|id|undefined cellData|是|CellData|表格数据配置|undefined data|是|string|数据|undefined name|是|string|sheet页名称|- columnCount|否|number|列数|36 rowCount|否|number|行数|300 rowData|是|RowData[]|行配置|undefined rowHeader|是|RowHeader|行头数据|undefined columnData|否|ColumnData[]|列数据属性|undefined columnHeader|否|ColumnHeader|列头属性|undefined defaultColumnWidth|否|number|默认列宽|84 defaultRowHeight|否|number|默认行高|32 freeze|否|Freeze||undefined hidden|否|BooleanNumber|是否隐藏|undefined mergeData|否|Range|合并单元格|undefined rightToLeft|否|BooleanNumber|是否从右到左展示|undefined showGridlines|否|BooleanNumber|显示表格线|1 tabColor|否|string|sheet页tab颜色|undefined

• Resource

| 参数 | 是否必填 | 类型 | 描述 | 默认值 | | ---- | -------- | ------ | ---- | --------- | | id | 否 | string | id | undefined | | name | 是 | string | 名称 | - | | data | 是 | string | 数据 | - |

• CellData

| 参数 | 是否必填 | 类型 | 描述 | 默认值 | | ---- | -------- | ----------------------- | -------- | --------- | | f | 否 | string | 公式 | undefined | | p | 否 | string | 名称 | undefined | | s | 否 | object | 样式数据 | undefined | | si | 否 | string | 公式id | undefined | | t | 否 | Nullable | 值类型 | - | | v | 否 | string|number|boolean | 值 | - |

• CellValueType

| 枚举 | 值 | | ------------ | ---- | | BOOLEAN | 3 | | FORCE_STRING | 4 | | NUMBER | 2 | | STRING | 1 |

• RowData

| 参数 | 是否必填 | 类型 | 描述 | 默认值 | | ---- | :------: | ------------- | ------------------------------------ | --------- | | hd | 否 | BooleanNumber | 隐藏 | undefined | | h | 否 | number | 高度 | undefined | | ah | 否 | number | 自动高度 | undefined | | ia | 否 | BooleanNumber | true当前行自动高度 false固定高度 | undefined |

• RowHeader

| 参数 | 是否必填 | 类型 | 描述 | 默认值 | | ------ | :------: | ------------- | ---- | --------- | | hidden | 否 | BooleanNumber | 隐藏 | undefined | | width | 否 | number | 款度 | 84 |

• ColumnData

| 参数 | 是否必填 | 类型 | 描述 | 默认值 | | ---- | :------: | ------------- | ---- | --------- | | hd | 否 | BooleanNumber | 隐藏 | undefined | | w | 否 | number | 宽度 | undefined |

• ColumnHeader

| 参数 | 是否必填 | 类型 | 描述 | 默认值 | | ------ | :------: | ------------- | ---- | --------- | | hidden | 否 | BooleanNumber | 隐藏 | undefined | | height | 否 | number | 高度 | 32 |

• Freeze

| 参数 | 是否必填 | 类型 | 描述 | 默认值 | | ----------- | :------: | ------ | ---- | --------- | | startRow | 否 | number | - | undefined | | startColumn | 否 | number | - | undefined | | ySplit | 否 | number | - | undefined | | xSplit | 否 | number | - | undefined |

• Range

| 参数 | 是否必填 | 类型 | 描述 | 默认值 | | ----------- | :------: | ------ | ---- | --------- | | startRow | 否 | number | - | undefined | | startColumn | 否 | number | - | undefined | | endRow | 否 | number | - | undefined | | endColumn | 否 | number | - | undefined |

• Style

| 参数 | 是否必填 | 类型 | 描述 | 默认值 | | ---- | :------: | ------ | -------- | --------- | | bbl | 否 | number | 边框底线 | undefined | | bd | 否 | number | - | undefined | | bg | 否 | number | - | undefined | | bl | 否 | number | - | undefined |

• TextDecoration

| 参数 | 是否必填 | 类型 | 描述 | 默认值 | | ---- | :------: | -------------- | ------------------------------------------------------------ | --------- | | c | 否 | BooleanNumber | 颜色跟随字体颜色。默认值为TRUE，如果未定义，也为TRUE。当c为TRUE时，cl不起作用。 | undefined | | cl | 否 | string | 颜色 | undefined | | s | 是 | BooleanNumber | 显示状态 | undefined | | t | 否 | TextDecoration | 线类型 | undefined |

• TextDecoration

| 枚举 | 值 | | ------------------ | ---- | | DASH | 0 | | DASHED_HEAVY | 3 | | DASH_DOT_DOT_HEAVY | 1 | | DASH_DOT_HEAVY | 2 | | DASH_LONG | 4 | | DASH_LONG_HEAVY | 5 | | DOTTED | 8 | | DOTTED_HEAVY | 9 | | DOT_DASH | 6 | | DOT_DOT_DASH | 7 | | DOUBLE | 10 | | NONE | 11 | | SINGLE | 12 | | THICK | 13 | | WAVE | 14 | | WAVY_DOUBLE | 15 | | WAVY_HEAVY | 16 | | WORDS | 17 |

• BooleanNumber

| 枚举 | 值 | | ----- | ---- | | TRUE | 1 | | FALSE | 0 |