diff --git a/package.json b/package.json index 00ff4ddb137..44c284e6f8c 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "vue-router": "^4.0.0-beta.13", "vuex": "^4.0.0-beta.4", "vuex-module-decorators": "^1.0.1", + "xlsx": "^0.16.8", "zxcvbn": "^4.4.2" }, "devDependencies": { diff --git a/src/components/Excel/index.ts b/src/components/Excel/index.ts new file mode 100644 index 00000000000..5e596112f71 --- /dev/null +++ b/src/components/Excel/index.ts @@ -0,0 +1,6 @@ +export { default as ImportExcel } from './src/ImportExcel'; +export { default as ExportExcelModel } from './src/ExportExcelModel.vue'; + +export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel'; + +export * from './src/types'; diff --git a/src/components/Excel/src/Export2Excel.ts b/src/components/Excel/src/Export2Excel.ts new file mode 100644 index 00000000000..eb1ec660ae9 --- /dev/null +++ b/src/components/Excel/src/Export2Excel.ts @@ -0,0 +1,57 @@ +import xlsx from 'xlsx'; +import type { WorkBook } from 'xlsx'; +import type { JsonToSheet, AoAToSheet } from './types'; +// import { isObject } from '@/src/utils/is'; + +const { utils, writeFile } = xlsx; + +export function jsonToSheetXlsx({ + data, + header, + filename = 'excel-list.xlsx', + json2sheetOpts = {}, + write2excelOpts = { bookType: 'xlsx' }, +}: JsonToSheet) { + const arrData = [...data]; + if (header) { + arrData.unshift(header); + json2sheetOpts.skipHeader = true; + } + + const worksheet = utils.json_to_sheet(arrData, json2sheetOpts); + + /* add worksheet to workbook */ + const workbook: WorkBook = { + SheetNames: [filename], + Sheets: { + [filename]: worksheet, + }, + }; + /* output format determined by filename */ + writeFile(workbook, filename, write2excelOpts); + /* at this point, out.xlsb will have been downloaded */ +} +export function aoaToSheetXlsx({ + data, + header, + filename = 'excel-list.xlsx', + write2excelOpts = { bookType: 'xlsx' }, +}: AoAToSheet) { + const arrData = [...data]; + if (header) { + arrData.unshift(header); + } + + const worksheet = utils.aoa_to_sheet(arrData); + + /* add worksheet to workbook */ + const workbook: WorkBook = { + SheetNames: [filename], + Sheets: { + [filename]: worksheet, + }, + }; + /* output format determined by filename */ + writeFile(workbook, filename, write2excelOpts); + /* at this point, out.xlsb will have been downloaded */ +} diff --git a/src/components/Excel/src/ExportExcelModel.vue b/src/components/Excel/src/ExportExcelModel.vue new file mode 100644 index 00000000000..6a28ba541c3 --- /dev/null +++ b/src/components/Excel/src/ExportExcelModel.vue @@ -0,0 +1,79 @@ + + diff --git a/src/components/Excel/src/ImportExcel.tsx b/src/components/Excel/src/ImportExcel.tsx new file mode 100644 index 00000000000..1a6b2a1586f --- /dev/null +++ b/src/components/Excel/src/ImportExcel.tsx @@ -0,0 +1,120 @@ +import { defineComponent, ref, unref } from 'vue'; +import XLSX from 'xlsx'; +import { getSlot } from '/@/utils/helper/tsxHelper'; + +import type { ExcelData } from './types'; +export default defineComponent({ + name: 'ImportExcel', + setup(_, { slots, emit }) { + const inputRef = ref(null); + const loadingRef = ref(false); + + /** + * @description: 第一行作为头部 + */ + function getHeaderRow(sheet: XLSX.WorkSheet) { + if (!sheet || !sheet['!ref']) return []; + const headers: string[] = []; + // A3:B7=>{s:{c:0, r:2}, e:{c:1, r:6}} + const range = XLSX.utils.decode_range(sheet['!ref']); + + const R = range.s.r; + /* start in the first row */ + for (let C = range.s.c; C <= range.e.c; ++C) { + /* walk every column in the range */ + const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]; + /* find the cell in the first row */ + let hdr = 'UNKNOWN ' + C; // <-- replace with your desired default + if (cell && cell.t) hdr = XLSX.utils.format_cell(cell); + headers.push(hdr); + } + return headers; + } + + /** + * @description: 获得excel数据 + */ + function getExcelData(workbook: XLSX.WorkBook) { + const excelData: ExcelData[] = []; + for (const sheetName of workbook.SheetNames) { + const worksheet = workbook.Sheets[sheetName]; + const header: string[] = getHeaderRow(worksheet); + const results = XLSX.utils.sheet_to_json(worksheet); + excelData.push({ + header, + results, + meta: { + sheetName, + }, + }); + } + return excelData; + } + + /** + * @description: 读取excel数据 + */ + function readerData(rawFile: File) { + loadingRef.value = true; + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = async (e) => { + try { + const data = e.target && e.target.result; + const workbook = XLSX.read(data, { type: 'array' }); + // console.log(workbook); + /* DO SOMETHING WITH workbook HERE */ + const excelData = getExcelData(workbook); + emit('success', excelData); + resolve(); + } catch (error) { + reject(error); + } finally { + loadingRef.value = false; + } + }; + reader.readAsArrayBuffer(rawFile); + }); + } + + async function upload(rawFile: File) { + const inputRefDom = unref(inputRef); + if (inputRefDom) { + // fix can't select the same excel + inputRefDom.value = ''; + } + readerData(rawFile); + } + /** + * @description: 触发选择文件管理器 + */ + function handleInputClick(e: Event) { + const files = e && (e.target as HTMLInputElement).files; + const rawFile = files && files[0]; // only use files[0] + if (!rawFile) return; + upload(rawFile); + } + /** + * @description: 点击上传按钮 + */ + function handleUpload() { + const inputRefDom = unref(inputRef); + inputRefDom && inputRefDom.click(); + } + + return () => { + return ( +
+ +
{getSlot(slots)}
+
+ ); + }; + }, +}); diff --git a/src/components/Excel/src/types.ts b/src/components/Excel/src/types.ts new file mode 100644 index 00000000000..e7622bb3fac --- /dev/null +++ b/src/components/Excel/src/types.ts @@ -0,0 +1,30 @@ +import type { JSON2SheetOpts, WritingOptions, BookType } from 'xlsx'; + +export interface ExcelData { + header: string[]; + results: T[]; + meta: { sheetName: string }; +} + +// export interface ImportProps { +// beforeUpload: (file: File) => boolean; +// } + +export interface JsonToSheet { + data: T[]; + header?: T; + filename?: string; + json2sheetOpts?: JSON2SheetOpts; + write2excelOpts?: WritingOptions; +} +export interface AoAToSheet { + data: T[][]; + header?: T[]; + filename?: string; + write2excelOpts?: WritingOptions; +} + +export interface ExportModalResult { + filename: string; + bookType: BookType; +} diff --git a/src/router/menus/modules/demo/comp.ts b/src/router/menus/modules/demo/comp.ts index c60b10551cf..18b7f0a9a08 100644 --- a/src/router/menus/modules/demo/comp.ts +++ b/src/router/menus/modules/demo/comp.ts @@ -66,6 +66,20 @@ const menu: MenuModule = { path: '/strength-meter', name: '密码强度组件', }, + { + path: '/excel', + name: 'excel', + children: [ + { + path: '/export', + name: 'Export', + }, + { + path: '/import', + name: 'Import', + }, + ], + }, ], }, }; diff --git a/src/router/routes/modules/demo/comp.ts b/src/router/routes/modules/demo/comp.ts index dc7c687e57b..0eb60a4bd1d 100644 --- a/src/router/routes/modules/demo/comp.ts +++ b/src/router/routes/modules/demo/comp.ts @@ -136,5 +136,31 @@ export default { title: '密码强度组件', }, }, + { + path: '/excel', + name: 'ExcelDemo', + redirect: '/comp/excel/export', + meta: { + title: 'excel', + }, + children: [ + { + path: 'export', + name: 'Export2Excel', + component: () => import('/@/views/demo/comp/excel/ExportToExcel.vue'), + meta: { + title: 'Export2Excel', + }, + }, + { + path: 'import', + name: 'ImportExcel', + component: () => import('/@/views/demo/comp/excel/ImportExcel.vue'), + meta: { + title: 'ImportExcel', + }, + }, + ], + }, ], } as AppRouteModule; diff --git a/src/views/demo/comp/excel/ExportToExcel.vue b/src/views/demo/comp/excel/ExportToExcel.vue new file mode 100644 index 00000000000..5030d3ef994 --- /dev/null +++ b/src/views/demo/comp/excel/ExportToExcel.vue @@ -0,0 +1,79 @@ + + + diff --git a/src/views/demo/comp/excel/ImportExcel.vue b/src/views/demo/comp/excel/ImportExcel.vue new file mode 100644 index 00000000000..ebfca0285b1 --- /dev/null +++ b/src/views/demo/comp/excel/ImportExcel.vue @@ -0,0 +1,56 @@ + + diff --git a/src/views/demo/comp/excel/data.ts b/src/views/demo/comp/excel/data.ts new file mode 100644 index 00000000000..3e528d42308 --- /dev/null +++ b/src/views/demo/comp/excel/data.ts @@ -0,0 +1,59 @@ +import { BasicColumn } from '/@/components/Table'; + +export const columns: BasicColumn[] = [ + { + title: 'ID', + dataIndex: 'id', + width: 80, + }, + { + title: '姓名', + dataIndex: 'name', + width: 120, + }, + { + title: '年龄', + dataIndex: 'age', + width: 80, + }, + { + title: '编号', + dataIndex: 'no', + width: 80, + }, + { + title: '地址', + dataIndex: 'address', + }, + { + title: '开始时间', + dataIndex: 'beginTime', + }, + { + title: '结束时间', + dataIndex: 'endTime', + }, +]; + +export const data: any[] = (() => { + const arr: any[] = []; + for (let index = 0; index < 40; index++) { + arr.push({ + id: `${index}`, + name: `${index} John Brown`, + age: `${index + 10}`, + no: `${index}98678`, + address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park', + beginTime: new Date().toLocaleString(), + endTime: new Date().toLocaleString(), + }); + } + return arr; +})(); + +// ["ID", "姓名", "年龄", "编号", "地址", "开始时间", "结束时间"] +export const arrHeader = columns.map((column) => column.title); +// [["ID", "姓名", "年龄", "编号", "地址", "开始时间", "结束时间"],["0", "0 John Brown", "10", "098678"]] +export const arrData = data.map((item) => { + return Object.keys(item).map((key) => item[key]); +}); diff --git a/yarn.lock b/yarn.lock index b058d32d74f..3eca9513a5a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1081,6 +1081,14 @@ add-stream@^1.0.0: resolved "https://registry.npmjs.org/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa" integrity sha1-anmQQ3ynNtXhKI25K9MmbV9csqo= +adler-32@~1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/adler-32/-/adler-32-1.2.0.tgz#6a3e6bf0a63900ba15652808cb15c6813d1a5f25" + integrity sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU= + dependencies: + exit-on-epipe "~1.0.1" + printj "~1.1.0" + aggregate-error@^3.0.0: version "3.1.0" resolved "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a" @@ -1570,6 +1578,15 @@ ccount@^1.0.0: resolved "https://registry.npmjs.org/ccount/-/ccount-1.0.5.tgz#ac82a944905a65ce204eb03023157edf29425c17" integrity sha512-MOli1W+nfbPLlKEhInaxhRdp7KVLFxLN5ykwzHgLsLI3H3gs5jjFAK4Eoj3OzzcxCtumDaI8onoVDeQyWaNTkw== +cfb@^1.1.4: + version "1.2.0" + resolved "https://registry.yarnpkg.com/cfb/-/cfb-1.2.0.tgz#6a4d0872b525ed60349e1ef51fb4b0bf73eca9a8" + integrity sha512-sXMvHsKCICVR3Naq+J556K+ExBo9n50iKl6LGarlnvuA2035uMlGA/qVrc0wQtow5P1vJEw9UyrKLCbtIKz+TQ== + dependencies: + adler-32 "~1.2.0" + crc-32 "~1.2.0" + printj "~1.1.2" + chalk@2.3.0: version "2.3.0" resolved "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba" @@ -1754,6 +1771,14 @@ co@^4.6.0: resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184" integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ= +codepage@~1.14.0: + version "1.14.0" + resolved "https://registry.yarnpkg.com/codepage/-/codepage-1.14.0.tgz#8cbe25481323559d7d307571b0fff91e7a1d2f99" + integrity sha1-jL4lSBMjVZ19MHVxsP/5HnodL5k= + dependencies: + commander "~2.14.1" + exit-on-epipe "~1.0.1" + collapse-white-space@^1.0.2: version "1.0.6" resolved "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287" @@ -1806,6 +1831,16 @@ commander@^2.19.0, commander@^2.20.0: resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== +commander@~2.14.1: + version "2.14.1" + resolved "https://registry.yarnpkg.com/commander/-/commander-2.14.1.tgz#2235123e37af8ca3c65df45b026dbd357b01b9aa" + integrity sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw== + +commander@~2.17.1: + version "2.17.1" + resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf" + integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg== + commitizen@^4.0.3, commitizen@^4.2.1: version "4.2.1" resolved "https://registry.npmjs.org/commitizen/-/commitizen-4.2.1.tgz#3b098b16c6b1a37f0d129018dff6751b20cd3103" @@ -2114,6 +2149,14 @@ cosmiconfig@^7.0.0: path-type "^4.0.0" yaml "^1.10.0" +crc-32@~1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/crc-32/-/crc-32-1.2.0.tgz#cb2db6e29b88508e32d9dd0ec1693e7b41a18208" + integrity sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA== + dependencies: + exit-on-epipe "~1.0.1" + printj "~1.1.0" + cross-env@^7.0.2: version "7.0.2" resolved "https://registry.npmjs.org/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9" @@ -2705,6 +2748,11 @@ execall@^2.0.0: dependencies: clone-regexp "^2.1.0" +exit-on-epipe@~1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz#0bdd92e87d5285d267daa8171d0eb06159689692" + integrity sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw== + expand-brackets@^2.1.4: version "2.1.4" resolved "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622" @@ -2942,6 +2990,11 @@ for-in@^1.0.2: resolved "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA= +frac@~1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/frac/-/frac-1.1.2.tgz#3d74f7f6478c88a1b5020306d747dc6313c74d0b" + integrity sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA== + fragment-cache@^0.2.1: version "0.2.1" resolved "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19" @@ -5337,6 +5390,11 @@ prettier@^2.1.2: resolved "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz#3050700dae2e4c8b67c4c3f666cdb8af405e1ce5" integrity sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg== +printj@~1.1.0, printj@~1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/printj/-/printj-1.1.2.tgz#d90deb2975a8b9f600fb3a1c94e3f4c53c78a222" + integrity sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ== + process-nextick-args@~2.0.0: version "2.0.1" resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" @@ -6158,6 +6216,13 @@ sprintf-js@~1.0.2: resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c" integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw= +ssf@~0.11.2: + version "0.11.2" + resolved "https://registry.yarnpkg.com/ssf/-/ssf-0.11.2.tgz#0b99698b237548d088fc43cdf2b70c1a7512c06c" + integrity sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g== + dependencies: + frac "~1.1.2" + state-toggle@^1.0.0: version "1.0.3" resolved "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz#e123b16a88e143139b09c6852221bc9815917dfe" @@ -7104,11 +7169,21 @@ which@^2.0.1: dependencies: isexe "^2.0.0" +wmf@~1.0.1: + version "1.0.2" + resolved "https://registry.yarnpkg.com/wmf/-/wmf-1.0.2.tgz#7d19d621071a08c2bdc6b7e688a9c435298cc2da" + integrity sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw== + word-wrap@^1.0.3, word-wrap@^1.2.3: version "1.2.3" resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c" integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ== +word@~0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/word/-/word-0.3.0.tgz#8542157e4f8e849f4a363a288992d47612db9961" + integrity sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA== + wordwrap@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" @@ -7168,6 +7243,21 @@ ws@^7.3.1: resolved "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz#d0547bf67f7ce4f12a72dfe31262c68d7dc551c8" integrity sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA== +xlsx@^0.16.8: + version "0.16.8" + resolved "https://registry.yarnpkg.com/xlsx/-/xlsx-0.16.8.tgz#5546de9b0ba15169b36770d4e43b24790d3ff1b8" + integrity sha512-qWub4YCn0xLEGHI7WWhk6IJ73MDu7sPSJQImxN6/LiI8wsHi0hUhICEDbyqBT+jgFgORZxrii0HvhNSwBNAPoQ== + dependencies: + adler-32 "~1.2.0" + cfb "^1.1.4" + codepage "~1.14.0" + commander "~2.17.1" + crc-32 "~1.2.0" + exit-on-epipe "~1.0.1" + ssf "~0.11.2" + wmf "~1.0.1" + word "~0.3.0" + xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1: version "4.0.2" resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"