添加 excel-export

src/cool/index.ts

@@ -14,7 +14,7 @@ export default {
 			}
 		},
 		// Excel 导出模块
-		"export",
+		"excel-export",
 		// crud 模块
 		{
 			name: "crud",

src/cool/modules/excel-export/components/export-btn.vue

@@ -0,0 +1,147 @@
+<template>
+	<el-button
+		:size="size"
+		:type="type"
+		:plain="plain"
+		:round="round"
+		:circle="circle"
+		:icon="icon"
+		:loading="loading"
+		:disabled="disabled"
+		@click="toExport"
+	>
+		<slot>导出</slot>
+	</el-button>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, ref } from "vue";
+import { currentDate, export_json_to_excel } from "../utils";
+
+export default defineComponent({
+	name: "cl-export-btn",
+
+	props: {
+		filename: [Function, String],
+		autoWidth: {
+			type: Boolean,
+			default: true
+		},
+		bookType: {
+			type: String,
+			default: "xlsx"
+		},
+		header: Array,
+		columns: {
+			type: Array,
+			required: true
+		},
+		data: [Function, Array],
+		maxExportLimit: Number, // 最大导出条数，不传或者小于等于0为不限制
+		size: {
+			type: String,
+			default: "mini"
+		},
+		disabled: Boolean,
+		type: String,
+		plain: Boolean,
+		round: Boolean,
+		circle: Boolean,
+		icon: String
+	},
+
+	setup(props) {
+		const loading = ref<boolean>(false);
+		const crud = inject<any>("crud");
+
+		async function getHeader(columns: any[], fields: any[]) {
+			return (
+				props.header || columns.filter((e) => fields.includes(e.prop)).map((e) => e.label)
+			);
+		}
+
+		function getData() {
+			if (typeof props.data === "function") {
+				return props.data();
+			} else {
+				if (props.data) {
+					return props.data;
+				} else {
+					return crud.service
+						.page({
+							...crud.paramsReplace(crud.params),
+							maxExportLimit: props.maxExportLimit,
+							isExport: true
+						})
+						.then((res: any) => res.list)
+						.catch((err: string) => {
+							console.error(err);
+							return null;
+						});
+				}
+			}
+		}
+
+		async function getFileName() {
+			if (typeof props.filename === "function") {
+				return await props?.filename();
+			} else {
+				const { year, month, day, hour, minu, sec } = currentDate();
+				return props.filename || `报表（${year}-${month}-${day} ${hour}_${minu}_${sec}）`;
+			}
+		}
+
+		async function toExport() {
+			if (!props.columns) {
+				return console.error("cl-export-btn.columns 不能为空！");
+			}
+
+			// 加载
+			loading.value = true;
+
+			// 表格列
+			const columns = props.columns.filter(
+				(e: any) =>
+					!["selection", "expand", "index"].includes(e.type) &&
+					!(e.filterExport || e["filter-export"])
+			);
+
+			// 字段
+			const fields = columns.map((e: any) => e.prop).filter(Boolean);
+
+			// 表头
+			let header = await getHeader(columns, fields);
+
+			// 数据
+			let data = await getData();
+
+			if (!data) {
+				loading.value = false;
+				return console.error("导出数据异常");
+			}
+
+			// 文件名
+			let filename = await getFileName();
+
+			// 过滤
+			data = data.map((d: any) => fields.map((f) => d[f]));
+
+			// 导出 excel
+			export_json_to_excel({
+				header,
+				data,
+				filename,
+				autoWidth: props.autoWidth,
+				bookType: props.bookType
+			});
+
+			loading.value = false;
+		}
+
+		return {
+			loading,
+			toExport
+		};
+	}
+});
+</script>

src/cool/modules/excel-export/index.ts

@@ -0,0 +1,9 @@
+import ExportBtn from "./components/export-btn.vue";
+
+export { ExportBtn };
+
+export default {
+	components: {
+		ExportBtn
+	}
+};

src/cool/modules/excel-export/utils/export2excel.ts

@@ -0,0 +1,232 @@
+/* eslint-disable */
+// @ts-nocheck
+import { saveAs } from 'file-saver';
+import XLSX from 'xlsx';
+
+function generateArray(table) {
+    var out = [];
+    var rows = table.querySelectorAll('tr');
+    var ranges = [];
+    for (var R = 0; R < rows.length; ++R) {
+        var outRow = [];
+        var row = rows[R];
+        var columns = row.querySelectorAll('td');
+        for (var C = 0; C < columns.length; ++C) {
+            var cell = columns[C];
+            var colspan = cell.getAttribute('colspan');
+            var rowspan = cell.getAttribute('rowspan');
+            var cellValue = cell.innerText;
+            if (cellValue !== '' && cellValue == +cellValue) cellValue = +cellValue;
+
+            //Skip ranges
+            ranges.forEach(function(range) {
+                if (
+                    R >= range.s.r &&
+                    R <= range.e.r &&
+                    outRow.length >= range.s.c &&
+                    outRow.length <= range.e.c
+                ) {
+                    for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+                }
+            });
+
+            //Handle Row Span
+            if (rowspan || colspan) {
+                rowspan = rowspan || 1;
+                colspan = colspan || 1;
+                ranges.push({
+                    s: {
+                        r: R,
+                        c: outRow.length
+                    },
+                    e: {
+                        r: R + rowspan - 1,
+                        c: outRow.length + colspan - 1
+                    }
+                });
+            }
+
+            //Handle Value
+            outRow.push(cellValue !== '' ? cellValue : null);
+
+            //Handle Colspan
+            if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+        }
+        out.push(outRow);
+    }
+    return [out, ranges];
+}
+
+function datenum(v, date1904) {
+    if (date1904) v += 1462;
+    var epoch = Date.parse(v);
+    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+}
+
+function sheet_from_array_of_arrays(data, opts) {
+    var ws = {};
+    var range = {
+        s: {
+            c: 10000000,
+            r: 10000000
+        },
+        e: {
+            c: 0,
+            r: 0
+        }
+    };
+    for (var R = 0; R != data.length; ++R) {
+        for (var C = 0; C != data[R].length; ++C) {
+            if (range.s.r > R) range.s.r = R;
+            if (range.s.c > C) range.s.c = C;
+            if (range.e.r < R) range.e.r = R;
+            if (range.e.c < C) range.e.c = C;
+            var cell = {
+                v: data[R][C]
+            };
+            if (cell.v == null) continue;
+            var cell_ref = XLSX.utils.encode_cell({
+                c: C,
+                r: R
+            });
+
+            if (typeof cell.v === 'number') cell.t = 'n';
+            else if (typeof cell.v === 'boolean') cell.t = 'b';
+            else if (cell.v instanceof Date) {
+                cell.t = 'n';
+                cell.z = XLSX.SSF._table[14];
+                cell.v = datenum(cell.v);
+            } else cell.t = 's';
+
+            ws[cell_ref] = cell;
+        }
+    }
+    if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+    return ws;
+}
+
+function Workbook() {
+    if (!(this instanceof Workbook)) return new Workbook();
+    this.SheetNames = [];
+    this.Sheets = {};
+}
+
+function s2ab(s) {
+    var buf = new ArrayBuffer(s.length);
+    var view = new Uint8Array(buf);
+    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
+    return buf;
+}
+
+export function export_table_to_excel(id) {
+    var theTable = document.getElementById(id);
+    var oo = generateArray(theTable);
+    var ranges = oo[1];
+
+    /* original data */
+    var data = oo[0];
+    var ws_name = 'SheetJS';
+
+    var wb = new Workbook(),
+        ws = sheet_from_array_of_arrays(data);
+
+    /* add ranges to worksheet */
+    // ws['!cols'] = ['apple', 'banan'];
+    ws['!merges'] = ranges;
+
+    /* add worksheet to workbook */
+    wb.SheetNames.push(ws_name);
+    wb.Sheets[ws_name] = ws;
+
+    var wbout = XLSX.write(wb, {
+        bookType: 'xlsx',
+        bookSST: false,
+        type: 'binary'
+    });
+
+    saveAs(
+        new Blob([s2ab(wbout)], {
+            type: 'application/octet-stream'
+        }),
+        'test.xlsx'
+    );
+}
+
+export function export_json_to_excel({
+    multiHeader = [],
+    header,
+    data,
+    filename,
+    merges = [],
+    autoWidth = true,
+    bookType = 'xlsx'
+} = {}) {
+    /* original data */
+    filename = filename || 'excel-list';
+    data = [...data];
+    data.unshift(header);
+
+    for (let i = multiHeader.length - 1; i > -1; i--) {
+        data.unshift(multiHeader[i]);
+    }
+
+    var ws_name = 'SheetJS';
+    var wb = new Workbook(),
+        ws = sheet_from_array_of_arrays(data);
+
+    if (merges.length > 0) {
+        if (!ws['!merges']) ws['!merges'] = [];
+        merges.forEach(item => {
+            ws['!merges'].push(XLSX.utils.decode_range(item));
+        });
+    }
+
+    if (autoWidth) {
+        /*设置worksheet每列的最大宽度*/
+        const colWidth = data.map(row =>
+            row.map(val => {
+                /*先判断是否为null/undefined*/
+                if (val == null) {
+                    return {
+                        wch: 10
+                    };
+                } else if (val.toString().charCodeAt(0) > 255) {
+                    /*再判断是否为中文*/
+                    return {
+                        wch: val.toString().length * 2
+                    };
+                } else {
+                    return {
+                        wch: val.toString().length
+                    };
+                }
+            })
+        );
+        /*以第一行为初始值*/
+        let result = colWidth[0];
+        for (let i = 1; i < colWidth.length; i++) {
+            for (let j = 0; j < colWidth[i].length; j++) {
+                if (result[j]['wch'] < colWidth[i][j]['wch']) {
+                    result[j]['wch'] = colWidth[i][j]['wch'];
+                }
+            }
+        }
+        ws['!cols'] = result;
+    }
+
+    /* add worksheet to workbook */
+    wb.SheetNames.push(ws_name);
+    wb.Sheets[ws_name] = ws;
+
+    var wbout = XLSX.write(wb, {
+        bookType: bookType,
+        bookSST: false,
+        type: 'binary'
+    });
+    saveAs(
+        new Blob([s2ab(wbout)], {
+            type: 'application/octet-stream'
+        }),
+        `${filename}.${bookType}`
+    );
+}

src/cool/modules/excel-export/utils/index.ts

@@ -0,0 +1,16 @@
+import { export_json_to_excel } from "./export2excel";
+
+function currentDate() {
+	const d: Date = new Date();
+
+	return {
+		year: d.getFullYear(),
+		month: d.getMonth() + 1,
+		day: d.getDate(),
+		hour: d.getHours(),
+		minu: d.getMinutes(),
+		sec: d.getSeconds()
+	};
+}
+
+export { export_json_to_excel, currentDate };

src/cool/modules/export

@@ -1 +0,0 @@
-Subproject commit b6043be8e0f029db1f0167f2fbbb71b1331b6897