# excel组件 ## 基础依赖 ### write-excel-file 文档:https://www.npmjs.com/package/write-excel-file ## 安装 ``` # npm 安装 npm i @ycxxkj/excel # yarn 安装 yarn add @ycxxkj/excel ``` # api说明 # 使用示例 ## 第1步,引入库文件 ``` import { ExcelWriter } from "@ycxxkj/excel"; ``` ## 第2步,写导出方法 ###2.1 分页查询 ``` /** * 分页查询数据并导出 * @param {*} params * @returns */ async output(params) { let data = [];//要导出的数据 let next = true;//是否有下一页,true为有,false为最后1页 let count = 0;// 计数 let maxPage = 1000;//最大查询页数,避免死循环 while (next) { //如果有数据,就查询 let pageRes = await this.list(params);//查询1页数据 console.log("#debug#🚀 ~ file: Order.js:23 ~ output ~ params:", params, pageRes) if (pageRes.code != 0) { break;//有错误就不查询下一页了 } let pageData = pageRes.data;//本页的数据 pageData.data.forEach((item, index) => { data.push(item);//将本页数据压入要导出的数据数组 }); if (pageData.current_page >= pageData.last_page) { next = false;//如果当前页数大于等于最后一页的页数,表示没有下一页 break; } params.page = params.page + 1;//查询下一页 count++; if (count > maxPage) { next = false;//如果 超过最大查询页数,就跳出循环 break;//避免死循环 } } await this._dealOutput(data);//导出数据 return { code: 0 };//返回结果 }, ``` ### 2.2 数据处理 #### 方式1:通过定义表头与表体 (不支持合并单元格) ``` //=========私有方法================ /** * 根据数据,构造打印EXCEL表格 * @param {*} data */ async _dealOutput(data) { /** * 导出的文件配置 */ let options = { fileName: "教师导出.xlsx",//文件名 }; /** * 导出的表头 */ let header = [ { key: "id", title: "ID", type: Number, }, { key: "name", title: "名称", width: 10 }, { key: "phone", title: "手机号", width: 15 }, { key: "real_name", title: "账号名称", width: 15 }, { key: "login_name", title: "账号", width: 22 }, { key: "nick_name", title: "昵称", width: 22 }, { key: "school_name", title: "学校", width: 22 }, { key: "role_name", title: "角色", width: 12 }, { key: "money", title: "余额", width: 10, type: Number }, { key: "valid", title: "是否有效", width: 12 }, ];//表头根据实际数据构造 let columns = [];//excel文件的列配置 header.forEach((item, index) => { let columnItem = {}; if (item?.width) { columnItem.width = item.width;//设置行宽 } columns.push(columnItem); }) options.columns = columns;//设置列 options.border = true;//设置边框,true为有边框,false为无边框 let excelDataBody = [];//excel的表体数据 data.forEach((item, index) => { let body = { id: item.id, name: item.name, phone: item.phone, real_name: item?.admin?.real_name, login_name: item?.admin?.login_name, nick_name: item?.admin?.nick_name, school_name: item?.school?.name ?? "", role_name: item?.admin?.adminRole?.name ?? "", money: item.money, valid: item.valid == 1 ? "有效" : "无效" };//body根据实际数据构造 excelDataBody.push(body);//把数据压入表体数组 }); ExcelWriter.outputExcel(header, excelDataBody, options);//导出excel } ``` #### 方式2 定义单元格内容 数据data项的参数,支持write-excel-file中的Cell Parameters值 ``` async _dealOutput() { //数据组合逻辑自行实现 let data = [ { poi: "A1", value: "表名", span: 4, align: "center" }, { poi: "A2", value: "姓名" }, { poi: "A3", value: "张三" }, { poi: "A4", value: "李四" }, { poi: "B2", value: "性别", span: 2 }, { poi: "B3", value: "男", span: 3 }, { poi: "B4", value: "女", rowSpan: 2, span: 2, alignVertical: "center", align: "center" }, { poi: "d2", borderColor: "#ff0000" }, { poi: "A6", borderColor: "#ff0000" }, { poi: "D6", value: "" } ]; ExcelWriter.outputExcelByData(data, { border: true, fileName: "测试导出.xlsx" }); } ``` ## 第3步,调用导出方法 ``` let params={ pageSize:1000, page:1, //... 其它条件自己添加 } let res = await output(params);//执行完后,浏览器会自己下载excel文件 ```