excel-jiniu v1.0.10

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

• Worksheet

• Resource

• CellData

• CellValueType

• RowData

• RowHeader

• ColumnData

• ColumnHeader

• Freeze

• Range

• Style

• TextDecoration

• TextDecoration

• BooleanNumber