From eeda4040a76399c6b51e72b64c0d61c79cf3d7c0 Mon Sep 17 00:00:00 2001
From: biancangming <942242856@qq.com>
Date: Fri, 15 Mar 2024 17:45:32 +0800
Subject: [PATCH] =?UTF-8?q?excel=E6=89=A9=E5=B1=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/xlsxView/demo/xlsxExport/index.md   |  1 +
 .../views/xlsxView/demo/xlsxExport/index.vue  | 55 +++++++++++++++++
 .../views/xlsxView/demo/xlsxImport/index.vue  | 13 +++-
 example/src/views/xlsxView/index.vue          | 10 +++-
 package.json                                  |  3 -
 src/utils/util.ts                             |  4 +-
 src/xlsx/index.ts                             |  4 +-
 src/xlsx/tools/xlsx-json.ts                   | 60 +++++++++++++++++--
 8 files changed, 136 insertions(+), 14 deletions(-)
 create mode 100644 example/src/views/xlsxView/demo/xlsxExport/index.md
 create mode 100644 example/src/views/xlsxView/demo/xlsxExport/index.vue

diff --git a/example/src/views/xlsxView/demo/xlsxExport/index.md b/example/src/views/xlsxView/demo/xlsxExport/index.md
new file mode 100644
index 0000000..29c95ce
--- /dev/null
+++ b/example/src/views/xlsxView/demo/xlsxExport/index.md
@@ -0,0 +1 @@
+@[js](./src/views/echartsView/demo/BarEchart/index.vue)
diff --git a/example/src/views/xlsxView/demo/xlsxExport/index.vue b/example/src/views/xlsxView/demo/xlsxExport/index.vue
new file mode 100644
index 0000000..5d5e2a6
--- /dev/null
+++ b/example/src/views/xlsxView/demo/xlsxExport/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <button @click="exportExcel()">导出excel</button>
+    <ElTable :data="data">
+      <ElTableColumn prop="a" label="A"></ElTableColumn>
+      <ElTableColumn prop="b" label="B"></ElTableColumn>
+      <ElTableColumn prop="c" label="C"></ElTableColumn>
+    </ElTable>
+  </div>
+</template>
+<script lang="ts" setup>
+import { xlsxFileToJson, jsonToXlsxFile } from "howuse/xlsx";
+import { loadLocalFile } from "howtools"
+import { ElTable, ElTableColumn } from "element-plus"
+import "element-plus/es/components/table/style/css"
+
+const table = ref()
+
+watchEffect(() => {
+  console.log(table.value)
+})
+const data = [
+  {
+    a: 1,
+    b: 2,
+    c: 3,
+  },
+  {
+    a: 4,
+    b: 5,
+    c: 6,
+  },
+  {
+    a: 7,
+    b: 8,
+    c: 9,
+  }
+]
+
+function exportExcel() {
+  jsonToXlsxFile({
+    // 表格数据
+    sheet: [
+      {
+        sheetName: "sheet1", // 表格sheet页名称
+        data: data // 表格数据
+      }
+    ],
+    // 替换字段
+    replaceFields: {
+      a: "第一列"
+    }
+  })
+}
+</script>
diff --git a/example/src/views/xlsxView/demo/xlsxImport/index.vue b/example/src/views/xlsxView/demo/xlsxImport/index.vue
index 1b7c22e..b0b6107 100644
--- a/example/src/views/xlsxView/demo/xlsxImport/index.vue
+++ b/example/src/views/xlsxView/demo/xlsxImport/index.vue
@@ -1,14 +1,25 @@
 <template>
   <div>
     <button @click="importExcel()">加载excel</button>
+    <div style=" max-height: 200px;overflow: auto;">
+      {{ refData }}
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
 import { xlsxFileToJson } from "howuse/xlsx";
 import { loadLocalFile } from "howtools"
+
+const refData = ref()
+
 function importExcel() {
   loadLocalFile().then(files => {
-    xlsxFileToJson(files[0]).then(console.log)
+    xlsxFileToJson({
+      xlsx: files[0],
+      replaceFields: { "第一列": "a" }
+    }).then((item) => {
+      refData.value = item
+    })
   })
 }
 </script>
diff --git a/example/src/views/xlsxView/index.vue b/example/src/views/xlsxView/index.vue
index 40bafc5..8fdf6f2 100644
--- a/example/src/views/xlsxView/index.vue
+++ b/example/src/views/xlsxView/index.vue
@@ -1,5 +1,11 @@
 <template>
-    <CodeView title="自适应折线图，其它自适应类似">
+    <CodeView title="xlsx数据导出">
+        <XlsxExportDemo />
+        <template #code>
+            <XlsxExportCode />
+        </template>
+    </CodeView>
+    <CodeView title="xlsx数据导入">
         <XlsxImportDemo />
         <template #code>
             <XlsxImportCode />
@@ -7,6 +13,8 @@
     </CodeView>
 </template>
 <script setup lang="ts">
+import XlsxExportDemo from "./demo/xlsxExport/index.vue";
+import XlsxExportCode from "./demo/xlsxExport/index.md";
 import XlsxImportDemo from "./demo/xlsxImport/index.vue";
 import XlsxImportCode from "./demo/xlsxImport/index.md";
 </script>
\ No newline at end of file
diff --git a/package.json b/package.json
index f89056e..ae9d408 100644
--- a/package.json
+++ b/package.json
@@ -80,8 +80,5 @@
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "xlsx": "^0.18.5"
-  },
-  "overrides": {
-    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz"
   }
 }
diff --git a/src/utils/util.ts b/src/utils/util.ts
index 76a152f..b8b75a1 100644
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -1,9 +1,11 @@
+import { isDefined } from "@vueuse/core"
+
 /**
  * @param  {T} val
  * @param  {} defVal=undefined
  * 为某个字段创建一个默认值，即undefined
  */
-export function createDef<T = any>(val: T, defVal: T) {
+export function createDef<T = any>(val: T, defVal: Exclude<T, undefined>) {
   return val === undefined || val === defVal ? defVal : val
 }
 
diff --git a/src/xlsx/index.ts b/src/xlsx/index.ts
index 51bdd7b..0b4fd4b 100644
--- a/src/xlsx/index.ts
+++ b/src/xlsx/index.ts
@@ -1,5 +1,5 @@
 // 参考文档  https://docs.sheetjs.com/docs
 
-import { xlsxFileToJson } from "./tools/xlsx-json"
+import { xlsxFileToJson, jsonToXlsxFile } from "./tools/xlsx-json"
 
-export { xlsxFileToJson }
\ No newline at end of file
+export { xlsxFileToJson, jsonToXlsxFile }
\ No newline at end of file
diff --git a/src/xlsx/tools/xlsx-json.ts b/src/xlsx/tools/xlsx-json.ts
index a39e833..2099227 100644
--- a/src/xlsx/tools/xlsx-json.ts
+++ b/src/xlsx/tools/xlsx-json.ts
@@ -1,23 +1,71 @@
-import { utils } from "xlsx"
+import { createDef } from "howuse/utils/util"
+import { utils, writeFile } from "xlsx"
 import { readXlsx } from "./xlsx"
 
-export function xlsxFileToJson(xlsx: File): Promise<Record<string, any>> {
+
+export interface XlsxImportOpts {
+    xlsx: File,
+    replaceFields?: Record<string, string>
+}
+
+export function xlsxFileToJson(opts: XlsxImportOpts): Promise<Record<string, any>> {
+    const replaceFields = createDef(opts.replaceFields, {})
+
     return new Promise((resolve, reject) => {
-        readXlsx(xlsx).then(wb => {
+        if (!opts.xlsx) {
+            reject("xlsx is required")
+            return
+        }
+
+        readXlsx(opts.xlsx).then(wb => {
             if (wb.SheetNames.length <= 0) {
                 reject("表格内容为空，请检查...")
             }
 
             const sheetJson = {}
             for (const sheetName of wb.SheetNames) {
-                const data = utils.sheet_to_json(wb.Sheets[sheetName])
+                const data = utils.sheet_to_json(wb.Sheets[sheetName]) as any[]
+                // 替换Excel当中的标题
+                for (const item of data) {
+                    for (const [key, value] of Object.entries(item)) {
+                        delete item[key]
+                        item[replaceFields[key] || key] = value
+                    }
+                }
+
                 sheetJson[sheetName] = data
             }
             resolve(sheetJson)
-        })
+        }).catch(reject)
     })
 }
 
-function jsonToXlsx(json: any) {
 
+// fieldOrder 排序之后的key顺序
+export interface XlsxExportOpts {
+    sheet: { sheetName: string, data: any }[]
+    fileName?: string,
+    replaceFields?: Record<string, string>
+}
+
+export function jsonToXlsxFile(xlsxData: XlsxExportOpts) {
+    const fileName = createDef(xlsxData.fileName, "demo.xlsx")
+    const replaceFields = createDef(xlsxData.replaceFields, {})
+    // 创建工作簿
+    const wb = utils.book_new();
+
+    for (const { sheetName, data } of xlsxData.sheet) {
+        // 替换表格当中的标题
+        for (const item of data) {
+            for (const [key, value] of Object.entries(item)) {
+                delete item[key]
+                item[replaceFields[key] || key] = value
+            }
+        }
+        const sheet = utils.json_to_sheet(data);
+        // 将工作表放入工作簿中
+        utils.book_append_sheet(wb, sheet, sheetName);
+        // 生成文件并下载
+    }
+    writeFile(wb, fileName);
 }
\ No newline at end of file