From a6abe9ced841963141a62f0250d2d248fa7c0695 Mon Sep 17 00:00:00 2001 From: zouzhibing Date: Wed, 18 May 2022 15:53:43 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Eexcel=E5=AF=BC=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 15 ---- src/router/modules/excel.ts | 6 ++ src/router/modules/other.ts | 2 +- src/utils/exprotExcel.ts | 82 ++++++++++++++++++++++ src/views/excel/export-style-excel.vue | 96 ++++++++++++++++++++++++++ src/views/excel/upload-excel.vue | 1 + src/views/login/index.vue | 10 --- 7 files changed, 186 insertions(+), 26 deletions(-) create mode 100644 src/views/excel/export-style-excel.vue diff --git a/README.md b/README.md index 5eb22da..eb51657 100644 --- a/README.md +++ b/README.md @@ -42,20 +42,5 @@ vue3.0 + Typescript + vuex + vue-router + Element-Plus scss - 退出 - 其他各组件 -## 开发 -``` -# 克隆项目 -git clone https://github.com/zouzhibin/vue-admin-perfect.git -# 安装依赖 -yarn install - -# 本地开发 启动项目 -yarn serve -``` - -### 发布 -``` -yarn build -``` diff --git a/src/router/modules/excel.ts b/src/router/modules/excel.ts index 3b62d24..176400d 100644 --- a/src/router/modules/excel.ts +++ b/src/router/modules/excel.ts @@ -32,6 +32,12 @@ const excelRouter = { name: 'upload-excel', meta: { title: '上传 Excel', noCache: true } }, + { + path: 'upload-style-excel', + component: () => import('@/views/excel/export-style-excel.vue'), + name: 'upload-style-excel', + meta: { title: '自定义样式导出 Excel', noCache: true } + }, ] } diff --git a/src/router/modules/other.ts b/src/router/modules/other.ts index 64a02e2..5a24865 100644 --- a/src/router/modules/other.ts +++ b/src/router/modules/other.ts @@ -8,7 +8,7 @@ const othersRouter = { redirect: 'noRedirect', name: 'other', meta: { - title: '扩展', + title: '扩展组件', icon: 'management' }, children: [ diff --git a/src/utils/exprotExcel.ts b/src/utils/exprotExcel.ts index 8ff5fcc..dff5db5 100644 --- a/src/utils/exprotExcel.ts +++ b/src/utils/exprotExcel.ts @@ -63,6 +63,88 @@ export const exportExcel = async ({column,data,filename,autoWidth,format})=>{ window.URL.revokeObjectURL(link.href); // 释放内存 } } +export function addCellStyle(cell, attr) { + const {color, fontSize, horizontal, bold} = attr || {}; + // eslint-disable-next-line no-param-reassign + cell.fill = { + type: 'pattern', + pattern: 'solid', + fgColor: {argb: color}, + }; + // eslint-disable-next-line no-param-reassign + cell.font = { + bold: bold ?? true, + size: fontSize ?? 11, + // italic: true, + // name: '微软雅黑', + color: {argb: 'ff0000'}, + }; + // eslint-disable-next-line no-param-reassign + cell.alignment = {vertical: 'middle', wrapText: true, horizontal: horizontal ?? 'left'}; +} + +export const exportStyleExcel =async ({column,data,filename,autoWidth,format})=>{ + // 创建excel + const workbook = new ExcelJS.Workbook(); + // 设置信息 + workbook.creator = "Me"; + workbook.title = filename; + workbook.created = new Date(); + workbook.modified = new Date(); + // 创建工作表 + const worksheet = workbook.addWorksheet(filename); + // 设置列名 + let columnsName = []; + column.forEach((item,index)=>{ + let obj = { + header: item.label, key:item.name, width: null + } + if(autoWidth){ + let maxArr = [autoWidthAction(item.label)] + data.forEach(ite=>{ + let str = ite[item.name] ||'' + if(str){ + maxArr.push(autoWidthAction(str)) + } + }) + obj.width = Math.max(...maxArr)+5 + } + // 设置列名、键和宽度 + columnsName.push(obj); + }) + worksheet.columns = columnsName; + // 添加行 + worksheet.addRows(data); + // 写入文件 + + // 设置表头颜色 + // 给表头添加背景色。因为表头是第一行，可以通过 getRow(1) 来获取表头这一行 + const headerRow = worksheet.getRow(1); + // 通过 cell 设置样式，更精准 + headerRow.eachCell((cell) => addCellStyle(cell, {color: 'dff8ff', fontSize: 12, horizontal: 'left'})); + + const uint8Array = + format === "xlsx" + ? await workbook.xlsx.writeBuffer() + : await workbook.csv.writeBuffer(); + + const blob = new Blob([uint8Array], { type: "application/octet-binary" }); + if (window.navigator.msSaveOrOpenBlob) { + // msSaveOrOpenBlob方法返回boolean值 + navigator.msSaveBlob(blob, filename + `.${format}`); + // 本地保存 + } else { + const link = document.createElement("a"); // a标签下载 + link.href = window.URL.createObjectURL(blob); // href属性指定下载链接 + link.download = filename + `.${format}`; // dowload属性指定文件名 + link.click(); // click()事件触发下载 + window.URL.revokeObjectURL(link.href); // 释放内存 + } +} + + + + // 默认的列宽 export const DEFAULT_COLUMN_WIDTH = 20; diff --git a/src/views/excel/export-style-excel.vue b/src/views/excel/export-style-excel.vue new file mode 100644 index 0000000..4a39758 --- /dev/null +++ b/src/views/excel/export-style-excel.vue @@ -0,0 +1,96 @@ + + + + + diff --git a/src/views/excel/upload-excel.vue b/src/views/excel/upload-excel.vue index 3fdd218..0a60bd3 100644 --- a/src/views/excel/upload-excel.vue +++ b/src/views/excel/upload-excel.vue @@ -4,6 +4,7 @@ style="width: 100%" class="upload-demo" drag + action="/" :before-upload="beforeUploadAction" type="file" accept=".xlsx, .xls" > diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 0e43472..7d4b34f 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -1,15 +1,5 @@