fix: Excel表格组件

.umirc.js

@@ -71,7 +71,14 @@ export default {
       },
       {
         title: '通用',
-        children: ['BasicTools', 'ImageSelect', 'QuotaSelect', 'TimeRangePicker', 'MqttView'],
+        children: [
+          'BasicTools',
+          'ImageSelect',
+          'QuotaSelect',
+          'TimeRangePicker',
+          'MqttView',
+          'ExportExcel',
+        ],
       },
       {
         title: '数据录入',

package.json

@@ -144,6 +144,8 @@
     "form-render": "^0.9.12",
     "highcharts": "^9.0.1",
     "highcharts-react-official": "^3.0.0",
+    "js-export-excel": "^1.1.4",
+    "jszip": "^3.5.0",
     "mqtt-client": "^1.0.11",
     "parseForm": "0.0.8"
   },

packages/ExportExcel/README.md

+# `@wisdom-components/ExportExcel`
+
+> TODO: description
+
+## Usage
+
+```
+const exportExcel = require('@wisdom-components/ExportExcel');
+
+// TODO: DEMONSTRATE API
+```

packages/ExportExcel/package.json

+{
+  "name": "@wisdom-components/exportexcel",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "lijiwen <961370825@qq.com>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "lib/ExportExcel.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "dependencies": {
+    "js-export-excel": "^1.1.4",
+    "jszip": "^3.5.0"
+  }
+}

packages/ExportExcel/src/ExportExcel.js

+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import ExportJsonExcel from 'js-export-excel';
+import JSZip from 'jszip';
+
+// 导出Excel表格
+const ExportExcel = (props) => {
+  var option = {};
+  option.fileName = props.name;
+  option.datas = props.content;
+
+  var toExcel = new ExportJsonExcel(option); //new
+  toExcel.saveExcel();
+};
+ExportExcel.defaultProps = {
+  name: 'excel',
+  content: [],
+};
+
+ExportExcel.propTypes = {
+  name: PropTypes.string, // 下载文件名称
+  content: PropTypes.array, // 下载文件内容
+};
+
+// 导出压缩Excel表格
+const ExportExcelZip = (props) => {
+  var option = {};
+  option.fileName = props.name;
+  option.saveAsBlob = true;
+
+  option.datas = props.content;
+
+  var toExcel = new ExportJsonExcel(option); //new
+  let file = toExcel.saveExcel();
+
+  // 压缩文件
+  var zip = new JSZip();
+
+  // 多个excel 依次加入(fileName不能相同)
+  zip.file(file.name, file);
+
+  zip.generateAsync({ type: 'blob' }).then(function (content) {
+    // see FileSaver.js
+    saveAs(content, `${props.name}.zip`); // 下载文件
+  });
+};
+ExportExcelZip.defaultProps = {
+  name: 'excel',
+  content: [],
+};
+
+ExportExcelZip.propTypes = {
+  name: PropTypes.string, // 下载文件名称
+  content: PropTypes.array, // 下载文件内容
+};
+
+export { ExportExcel, ExportExcelZip };

packages/ExportExcel/src/ExportExcel.md

+---
+title: ExportExcel - Excel表格导出
+nav:
+  title: 组件
+  path: /components
+group:
+  path: /
+---
+
+# PandaExportExcel Excel 表格导出
+
+<code src="./demos/Base.tsx">
+
+## API
+
+| 参数    | 说明                                  | 类型   | 默认值  |
+| ------- | ------------------------------------- | ------ | ------- |
+| name    | Excel 表格名称                        | string | 'excel' |
+| content | Excel 表格内容，支持多个 sheet[{},{}] | array  | []      |
+
+## content 每一项内容
+
+| 名称         | 描述                | 类型    |
+| ------------ | ------------------- | ------- |
+| sheetData    | 数据                | array   |
+| sheetName    | sheet 名字          | string  |
+| sheetFilter  | 列过滤              | array[] |
+| sheetHeader  | 表头                | array[] |
+| columnWidths | 列宽 需与列顺序对应 | array[] |

packages/ExportExcel/src/demos/base.tsx

+import React, { useEffect } from 'react';
+import { ExportExcel, ExportExcelZip } from '../ExportExcel';
+import { Button } from 'antd';
+const ExportExcelDemo = (props) => {
+  const exportExcelBtn = () => {
+    ExportExcel({
+      name: '下载Excel',
+      content: [
+        {
+          sheetData: [
+            { one: '一行一列', two: '一行二列' },
+            { one: '二行一列', two: '二行二列' },
+          ],
+          sheetName: 'sheet1',
+          sheetFilter: ['two', 'one'],
+          sheetHeader: ['第一列', '第二列'],
+          columnWidths: [20, 20],
+        },
+        {
+          sheetData: [
+            { one: '一行一列', two: '一行二列' },
+            { one: '二行一列', two: '二行二列' },
+          ],
+          sheetName: 'sheet2',
+          sheetFilter: ['one', 'two'],
+          sheetHeader: ['第一列', '第二列'],
+          columnWidths: [20, 20],
+        },
+      ],
+    });
+  };
+  const exportExcelZipBtn = () => {
+    ExportExcelZip({
+      name: '下载Excel',
+      content: [
+        {
+          sheetData: [
+            { one: '一行一列', two: '一行二列' },
+            { one: '二行一列', two: '二行二列' },
+          ],
+          sheetName: 'sheet1',
+          sheetFilter: ['two', 'one'],
+          sheetHeader: ['第一列', '第二列'],
+          columnWidths: [20, 20],
+        },
+        {
+          sheetData: [
+            { one: '一行一列', two: '一行二列' },
+            { one: '二行一列', two: '二行二列' },
+          ],
+          sheetName: 'sheet2',
+          sheetFilter: ['one', 'two'],
+          sheetHeader: ['第一列', '第二列'],
+          columnWidths: [20, 20],
+        },
+      ],
+    });
+  };
+  return (
+    <>
+      <Button onClick={exportExcelBtn} style={{ marginRight: '10px' }}>
+        下载Excel
+      </Button>
+      <Button onClick={exportExcelZipBtn}>下载压缩Excel</Button>
+    </>
+  );
+};
+export default ExportExcelDemo;