xlsx模块 前端_导出带样式的Excel功能模块的实现

最新推荐文章于 2024-07-30 09:30:00 发布
最新推荐文章于 2024-07-30 09:30:00 发布
阅读量468 收藏
点赞数
文章标签： xlsx模块 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_28996083/article/details/112933077
版权

开发后台系统的过程中，常常有导出Excel的需求，虽然程序早已上线，闲暇之时也觉应总结。有关更多POI的文档资料，参考http://poi.apache.org/。Apache POI是Apache软件基金会的开放源码函式库，POI提供给Java程式对Microsoft Office格式档案读和写的功能。HSSF提供读写Mircosoft Excel XLS格式档案的功能，HSSF是Horrible(可怕的) Spreadsheet(电子表格) Format的缩写。是在JSP页面中添加如下Code:

前端页面显示一个如图所示的按钮:

然后添加JS代码:

$(document).ready(function(){

$("#exportExcel").click(function(){

var spId = ${spId};

var addTimeStart = '';

var addTimeEnd = '';

var url="/complaint/export_excel.do?";

url += "spId="+spId;

url += "&addTimeStart=" +addTimeStart;

url += "&addTimeEnd=" + addTimeEnd;

window.location.href=url;

})

})

在控制层中添加如下Java代码:

@RequestMapping(value = "/complaint/export_excel")

public void exportExcel(HttpServletResponse _response) throws IOException {

HSSFWorkbook workbook = new HSSFWorkbook(); //生成Excel工作薄

Map style = createStyles(workbook);

HSSFSheet sheet = workbook.createSheet("通道平均信息分析报表"); //生成工作表

sheet.addMergedRegion(CellRangeAddress.valueOf("$A$1:$F$1")); //合并单元格

sheet.setDefaultColumnWidth(25); //设置默认列宽度

HSSFRow row0 = sheet.createRow(0);

HSSFCell titleCell = row0.createCell(0);

titleCell.setCellValue("通道平均信息分析报表");

titleCell.setCellStyle(style.get("title"));

HSSFRow row1 = sheet.createRow(1);

HSSFCell headerCell0 = row1.createCell(0);

headerCell0.setCellValue("时间");

headerCell0.setCellStyle(style.get("header"));

HSSFCell headerCell1 = row1.createCell(1);

headerCell1.setCellValue("订单确认率");

headerCell1.setCellStyle(style.get("header"));

HSSFCell headerCell2 = row1.createCell(2);

headerCell2.setCellValue("PO成功率");

headerCell2.setCellStyle(style.get("header"));

HSSFCell headerCell3 = row1.createCell(3);

headerCell3.setCellValue("MO成功率");

headerCell3.setCellStyle(style.get("header"));

HSSFCell headerCell4 = row1.createCell(4);

headerCell4.setCellValue("MR成功率");

headerCell4.setCellStyle(style.get("header"));

HSSFCell headerCell5 = row1.createCell(5);

headerCell5.setCellValue("计费转化率");

headerCell5.setCellStyle(style.get("header"));

for(int i=2; i<100; i++){

HSSFRow tempRow = sheet.createRow(i);

tempRow.setHeightInPoints(22);

for(int j=0; j<6; j++){

HSSFCell cellCell = tempRow.createCell(j);

cellCell.setCellValue(i+"--"+j);

if(j%2==0){

cellCell.setCellStyle(style.get("cell1"));

}else{

cellCell.setCellStyle(style.get("cell2"));

}

}

}

FileOutputStream fops = new FileOutputStream("F://Excel//通道平均信息分析报表.xls");

workbook.write(fops);

fops.close();

InputStream inst = new FileInputStream("F://Excel//通道平均信息分析报表.xls");

BufferedInputStream bis = new BufferedInputStream(inst);

OutputStream oust = _response.getOutputStream();

BufferedOutputStream bos = new BufferedOutputStream(oust);

_response.setContentType("application/vnd.ms-excel");

_response.setHeader("Content-disposition", "attachment;filename=YourDownloadExcel.xls");

_response.setCharacterEncoding("utf-8");

int flag = 0;

byte[] tempBuffer = new byte[5 * 1024];

while((flag = bis.read(tempBuffer)) != -1){

bos.write(tempBuffer, 0, flag);

}

bis.close();

bos.close();

inst.close();

oust.close();

}

在同一个类中添加入代码:

/**

* Create a library of cell styles

*/

private static Map createStyles(Workbook wb){

Map styles = new HashMap();

CellStyle style;

Font titleFont = wb.createFont();

titleFont.setFontHeightInPoints((short)25);

titleFont.setBoldweight(Font.BOLDWEIGHT_BOLD);

style = wb.createCellStyle();

style.setAlignment(CellStyle.ALIGN_CENTER); // 设置水平对齐方式

style.setFillPattern(CellStyle.SOLID_FOREGROUND); //设置填充方式

style.setFillBackgroundColor(HSSFColor.ORANGE.index); //设置背景颜色

style.setFillForegroundColor(HSSFColor.TEAL.index); //设置前景颜色

style.setVerticalAlignment(CellStyle.VERTICAL_CENTER);

style.setFont(titleFont);

styles.put("title", style);

Font monthFont = wb.createFont();

monthFont.setFontHeightInPoints((short)20);

monthFont.setColor(IndexedColors.WHITE.getIndex());

style = wb.createCellStyle();

style.setAlignment(CellStyle.ALIGN_CENTER);

style.setVerticalAlignment(CellStyle.VERTICAL_CENTER);

style.setFillForegroundColor(IndexedColors.GREY_50_PERCENT.getIndex());

style.setFillPattern(CellStyle.SOLID_FOREGROUND);

style.setFont(monthFont);

style.setWrapText(true);

style.setFillPattern(CellStyle.SOLID_FOREGROUND);

style.setFillForegroundColor(HSSFColor.GOLD.index);

styles.put("header", style);

style = wb.createCellStyle();

style.setAlignment(CellStyle.ALIGN_CENTER);

style.setWrapText(true);

style.setBorderRight(CellStyle.BORDER_THIN);

style.setRightBorderColor(IndexedColors.BLACK.getIndex());

style.setBorderLeft(CellStyle.BORDER_THIN);

style.setLeftBorderColor(IndexedColors.BLACK.getIndex());

style.setBorderTop(CellStyle.BORDER_THIN);

style.setTopBorderColor(IndexedColors.BLACK.getIndex());

style.setBorderBottom(CellStyle.BORDER_THIN);

style.setBottomBorderColor(IndexedColors.BLACK.getIndex());

style.setFillPattern(CellStyle.SOLID_FOREGROUND);

style.setFillForegroundColor(HSSFColor.LAVENDER.index);

styles.put("cell1", style);

style = wb.createCellStyle();

style.setAlignment(CellStyle.ALIGN_CENTER);

style.setWrapText(true);

style.setBorderRight(CellStyle.BORDER_THIN);

style.setRightBorderColor(IndexedColors.BLACK.getIndex());

style.setBorderLeft(CellStyle.BORDER_THIN);

style.setLeftBorderColor(IndexedColors.BLACK.getIndex());

style.setBorderTop(CellStyle.BORDER_THIN);

style.setTopBorderColor(IndexedColors.BLACK.getIndex());

style.setBorderBottom(CellStyle.BORDER_THIN);

style.setBottomBorderColor(IndexedColors.BLACK.getIndex());

style.setFillPattern(CellStyle.SOLID_FOREGROUND);

style.setFillForegroundColor(HSSFColor.ROSE.index);

styles.put("cell2", style);

style = wb.createCellStyle();

style.setAlignment(CellStyle.ALIGN_CENTER);

style.setVerticalAlignment(CellStyle.VERTICAL_CENTER);

style.setFillForegroundColor(IndexedColors.GREY_25_PERCENT.getIndex());

style.setFillPattern(CellStyle.SOLID_FOREGROUND);

style.setDataFormat(wb.createDataFormat().getFormat("0.00"));

styles.put("formula", style);

style = wb.createCellStyle();

style.setAlignment(CellStyle.ALIGN_CENTER);

style.setVerticalAlignment(CellStyle.VERTICAL_CENTER);

style.setFillForegroundColor(IndexedColors.GREY_40_PERCENT.getIndex());

style.setFillPattern(CellStyle.SOLID_FOREGROUND);

style.setDataFormat(wb.createDataFormat().getFormat("0.00"));

styles.put("formula_2", style);

return styles;

}

导出后的Excel如下图所示:

Excel分前景色和后景色，前景色的设置需要调用如下方法:

void org.apache.poi.ss.usermodel.CellStyle.setFillForegroundColor(short bg)

,背景色的设置需要调用方法是:

void org.apache.poi.ss.usermodel.CellStyle.setFillBackgroundColor(short bg)

填充参数bg的一个简单例子----HSSFColor.ORANGE.index。HSSFColor索引对照表见博客最下方的对照表。

设置填充模式使用

void org.apache.poi.ss.usermodel.CellStyle.setFillPattern(short fp)

填充参数fp的一个简单例子-----CellStyle.SOLID_FOREGROUND。CellStyle索引对照表见下方图片:

HSSFColor索引对照表:

.

HSSFColor.GREY_80_PERCENT

.

HSSFColor.INDIGO

.

HSSFColor.PLUM

HSSFColor.BROWN

.

HSSFColor.OLIVE_GREEN

.

HSSFColor.DARK_GREEN

.

HSSFColor.SEA_GREEN

.

HSSFColor.DARK_TEAL

.

HSSFColor.GREY_40_PERCENT

.

HSSFColor.BLUE_GREY

.

HSSFColor.ORANGE

.

HSSFColor.LIGHT_ORANGE

.

HSSFColor.GOLD

.

HSSFColor.LIME

.

HSSFColor.AQUA

.

HSSFColor.LIGHT_BLUE

.

HSSFColor.TAN

.

HSSFColor.LAVENDER

.

HSSFColor.ROSE

.

HSSFColor.PALE_BLUE

.

HSSFColor.LIGHT_YELLOW

.

HSSFColor.LIGHT_GREEN

.

HSSFColor.LIGHT_TURQUOISE

.

HSSFColor.SKY_BLUE

.

HSSFColor.BLUE

.

HSSFColor.TEAL

.

HSSFColor.DARK_RED

.

HSSFColor.VIOLET

.

HSSFColor.TURQUOISE

.

HSSFColor.YELLOW

.

HSSFColor.PINK

.

HSSFColor.DARK_BLUE

.

HSSFColor.LIGHT_CORNFLOWER_BLUE

.

HSSFColor.ROYAL_BLUE

.

HSSFColor.CORAL

.

HSSFColor.ORCHID

.

HSSFColor.LIGHT_TURQUOISE

.

HSSFColor.LEMON_CHIFFON

.

HSSFColor.PLUM

.

HSSFColor.CORNFLOWER_BLUE

.

HSSFColor.GREY_50_PERCENT

.

HSSFColor.GREY_25_PERCENT

.

HSSFColor.TEAL

.

HSSFColor.VIOLET

.

HSSFColor.DARK_YELLOW

.

HSSFColor.DARK_BLUE

.

HSSFColor.GREEN

.

HSSFColor.DARK_RED

.

HSSFColor.TURQUOISE

.

HSSFColor.PINK

.

HSSFColor.YELLOW

.

HSSFColor.BLUE

.

HSSFColor.BRIGHT_GREEN

.

HSSFColor.RED

.

HSSFColor.WHITE

.

HSSFColor.BLACK

Happy Yinger
关注
xlsx模块 前端_利用xlsx-syle前端导出excel且支持自定义样式
weixin_30322969的博客
12-24 796
利用xlsx-syle前端导出excel且支持自定义样式前言本文的代码是基于react的。本文仅用于记录我在前端导出excel遇到的问题的笔记整理。需求描述需要前端来实现对数据的导出，导出成excel格式。excel打开后的样式要符合需求图需求图：导出1.png前期解决过程我在网上找到前端用于导出的插件js-xlsx，按照操作说明鼓捣完成后导出excel的样子只是最基础的模板导出2.png当我想进...
xlsx模块 前端_[SheetJS] js-xlsx模块学习指南
weixin_35564436的博客
01-14 890
简介SheetJS是前端操纵Excel以及相似的二维表的最好挑选之一,而js-xlsx是它的社区版本.js-xlsx将注重力集合到了数据转换和导出上,所以它支撑相当多品种的数据剖析和导出.不单单议局限于支撑xlsx花样.它可以:剖析相符花样的数据导出相符花样的数据应用中间层操纵数据可以运行在:浏览器端Node端浏览器端特征纯浏览器端剖析数据纯浏览器端导出数据Node端特征读写文件流式读写本篇文章力...
js导出带样式的excel.zip
09-02
js导出带样式的excel，简单易用，基于layui，欢迎下载，谢谢！
前端导出Excel带样式
qq_44977477的博客
05-21 377
DekExcel1: function () { // 标题 let tiuelestyle = "width:165px;height:150px;line-height:120px;color:#0000ff;font-size:40px;padding-left:180px;box-sizing:border-box;font-family:宋体;font-weight:bolder;"; // 标椎 let wh = "width:16
手摸手教你前端和后端是如何实现导出 Excel 的？
最新发布
xyendjsj的博客
07-30 2455
本文详细介绍前端和后端如何实现导出数据至 Excel，全程高能无尿点。
基于SheetJS以及XLSXStyle的纯前端带样式导出表格为Excel的工具包
08-12
基于SheetJS以及XLSX-Style的纯前端带样式导出表格为Excel的工具包
纯js前端导出可定制样式excel
lastmonitors的博客
06-26 1238
思路是将html页面转为blob对象再生成一个地址通过a标签点击下载 优点是样式可定制
vue导出带样式的excel
liuguowei14的博客
09-13 230
实现导出excel不同块的颜色。
使用js导出带样式的excel表格
12-25
使用js导出带样式的excel表格模板，有demo
js导入导出excel并携带样式
qq_46126127的博客
05-10 1236
推荐使用这个exceljs 因为其他的没找到携带样式的 先导入 打印输出的结果 我们需要的数据在worksheets里 rowCount为行数，columnCount为列数 model里properties有默认的行高与列宽，通过对比cols数组的width与rows数组中的height可以知道行高与列宽变大了还是变小了，merges里存放着合并的单元格 rows数组中可以看到有单元格值与样式 大致效果 导出 创建工作簿，之后创建一个名为shee...
js导出excel，并保留特定的样式
lizheng8715的博客
04-10 1402
客户要求了导出excel的样式，去网上找了很多办法，最终还是觉得这个办法最靠谱。 原理是office文档可以导出成html，那自然也可以打开内容是html的文档。 创建一份html文档，下载时，后缀以.xls结尾。 以这种方式下载的下载的excel优点是可以随意设置样式，其他以json导出的excel表很多都不能设置样式。 缺点也比较明显，就是打开时会提示，文件格式与后缀不匹配，是否仍要打...
纯JS对页面表格进行EXCEL导出（完整导出，包含页面样式）
01-08
** 纯JS对页面表格进行EXCEL导出 ** 1.中间部分在style标签那种可以使用css样式对表格进行任意样式的修改 2.在tableid[removed]中可以对表格中的内容进行修改替换（其中放的内容就是导出后的表格内容） 3.需要引入xlsx.full.min.js文件 4.tableid为为表格的id 5.sheetName为下载后的文件名称 base64(excelFile) { return window.btoa(unescape(encodeURIComponent(excelFile))) }, t
基于JS实现table导出Excel并保留样式
10-15
主要介绍了基于JS实现table导出Excel并保留样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JS POI EXCEL 原样式导出
01-02
JS 基于ligerui excel 导出，采用poi方式，可实现冻结行列，图片，原样式等功能导出。
js导出Excel 、Word ［超实用］［自动保存样式］
10-24
使用JAVASCRIPT导出页面里的任意一个Table里的内容到Word或Excel.而且还保留了Table在页面里的样式。
javascript支持带样式的excel导出库
过客2019
04-19 537
之前一直使用node-xlsx这个来生成excel文件。大多数的情况下，这个完全胜任。前端时间，要求输出合并单元格，这个支持，然后要求居中，就嗝屁了~。没有办法，只好去找了。最后找到一个xlsx-js-style，符合要求，与node-xlsx一样，都是基于xlsx的库。但是我的代码都是使用node-xlsx的，批量替换会改很多代码。于是，我fork了node-xlsx，然后用xlsx-js-style替换了xlsx，再把xlsx-js-style全部导出，设置单元的时候，这样就可以用代码提示，不用盳猜了。
[最简单]exceljs 纯前端导出Excel,带样式,保护锁定
sanghongxv的博客
03-26 497
【代码】[最简单]exceljs 纯前端导出Excel,带样式,设置,保护锁定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值