前端导出Excel（自定义样式、多级表头、普通导出）

这里写自定义目录标题

预览![请添加图片描述](https://img-blog.csdnimg.cn/c0b7168aa0f045ffab01dc952e2b006e.gif)
背景
使用插件exceljs
下载exceljs
设置导出表格数据
- 代码实现

预览

背景

在做一个后台管理系统，需要做数据导出excel，于是采用了前端进行导出，前端可以根据配置字段进行数据生产excel，然后在浏览器进行下载。

使用插件exceljs

经过多方对比，最终选择用exceljs来做导出excel的工具库，因为开发着非常活跃，在这里选用的是 exceljs,支持nodejs服务端和兼容大多数浏览器导出，读写支持完美，活跃度很高，使用简单。

下载exceljs

npm install exceljs

设置导出表格数据

假设我们需要导出一个这样的表格

数据

data

 const data = []for(let i=0;i<100;i++){data.push({date: '2016-05-02',name: '王五'+i,price: 1+i,province: '上海',admin:"admin",sex:i%2?1:0,checked:true,id:i+1,age:0,city: '普陀区',address: '上海市普上海',zip: 200333})}

column

  const column = [{ name: 'id', label: 'id', },{ name: 'name', label: '姓名',},{ name: 'age', label: '年龄',},{ name: 'sex', label: '性别',},{   name: 'price',  label: '价格', },{ name: 'admin', label: '账号'},{ name: 'address', label: '地址', },{ name: 'date', label: '日期',},{ name: 'province', label: '省份' },{ name: 'city', label: '城市' },{ name: 'zip', label: '邮编' },]

methods

const exportExcelAction = ()=>{exportExcel({column,data,filename:input.value||'导出 excel',format:format.value,autoWidth:true})}

代码实现

 const ExcelJS = require("exceljs");// 创建excelconst 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);// 写入文件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); // 释放内存}

在线预览展示感兴趣的话可以给个star–》github源码地址

前端导出Excel（自定义样式、多级表头、普通导出）相关推荐

使用poi导出excel生成复杂多级表头通用方法
使用poi导出excel生成复杂多级表头通用方法话不多说,直接上代码,需要用的的实体类如下话不多说,直接上代码,需要用的的实体类如下 package com.test;public class U ...
前端导出excel自定义样式(行高除外)
前端导出excel需要用到的依赖有xlsx.xlsx-style import XLSX from 'xlsx'; import XLSXStyle from 'xlsx-style'; npm in ...
vue使用Export2Excel.js导出表格自定义样式（表头加分割斜线）（笔记）
1.Export2Excel.js 文件内容 /* eslint-disable */ /** 导出Excel需要依赖 * npm install xlsx file-saver -S * npm i ...
hutool工具导出excel 自定义样式------excel压缩jar
默认样式导出 //excel public void test() {//随机值String fileUuid = UuidKit.getUUIDNoMinus();String path = (Pa ...
使用easyexcel完成复杂表头及标题的导出功能(自定义样式及多sheet导出)
如需客户端指定excel版本,只需要判断后缀名然后在controller中的.excelType(ExcelTypeEnum.XLS)做指定输出内容格式即可 ***(注意表格行高列宽统一设置是在实体类 ...
Vue 前端导出Excel表格，多级表头合并
针对有Excel导出经验安装依赖 npm install --save xlsx file-saver 引入以下文件 Blob.js /* eslint-disable */ /* Blob.js* ...
Java操作poi导出Excel自定义字体颜色
Java操作poi导出Excel自定义字体颜色功能介绍 POI操作Excel 第一步创建一个导出的工具类整体定义表格字体样式自定义表格字体样式总结功能介绍 Apache POI 是用Java ...
jeecg导出excel设置样式XLS(03)与XLSX(07)
jeecg版本依赖 <modelVersion>4.0.0</modelVersion><groupId>org.jeecgframework.boot</g ...
easy-excel 导出excel自定义列格式
导出excel的样式: 代码 @RequestMapping(value = "export",method = RequestMethod.GET)public void exp ...
POI封装工具easyexcel导出EXCEL表样式设置
POI封装工具easyexcel导出EXCEL表样式设置 java中对Office操作比较好的工具是POI,但POI在导出数据量较大的情况下很容易因内存占用过大,而出错,阿里巴巴推出的easyexce ...