報表生成(POI,jquery.table2excel.js,Echarts)
最近公司要弄個報表相關的功能,話不多說,先上圖
前一種是POI 生成的,後一種是Echarts生成的。報表我想大家都不陌生,基本上在公司業務中都會使用到。先說說POI,jquery.table2excel.js,Echarts這三種使用區別吧,本篇部落格主要是使用上,如果只是像表格那樣標準格式的匯出的話,我想用table2挺好,只要把相關的js引入就可以使用,不用像poi那樣生成模板,新增樣式什麼的。在網上都能搜到一大堆程式碼,當然了能不能用就不知道了。https://blog.csdn.net/weixin_36751895/article/details/79303854 這是相關連結;
POI雖然麻煩點,但是可以隨著我們的心意基本上可以實現,就如第一種那種特殊樣式的報表。
POI一般分為三個步驟:
1. 首先是POI 樣式/模板的生成,你需要什麼樣式/模板,這是相關程式碼:
import java.io.*;
import java.text.SimpleDateFormat;
import org.apache.poi.hssf.usermodel.HSSFCell;
import org.apache.poi.hssf.usermodel.HSSFCellStyle;
import org.apache.poi.hssf.usermodel.HSSFClientAnchor;
import org.apache.poi.hssf.usermodel.HSSFFont;
import org.apache.poi.hssf.usermodel.HSSFPatriarch;
import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.ss.usermodel.HorizontalAlignment;
import org.apache.poi.ss.usermodel.VerticalAlignment;
import org.apache.poi.ss.usermodel.ClientAnchor.AnchorType;
import org.apache.poi.ss.util.CellRangeAddress;
import java.net.HttpURLConnection;
import java.net.URL;
import com.cn.jr.model.JrUser;
import com.cn.rz.model.JrUserOrders;
public class ExportExcel {
public void getValue(JrUser jrUser, JrUserOrders jrUserOrders, String imageUrl, OutputStream outData) {
if (jrUser == null || jrUserOrders == null) {
jrUser = new JrUser();
jrUserOrders = new JrUserOrders();
}
HSSFWorkbook workbook = new HSSFWorkbook();
try {
// 1.建立工作簿
// 1.1建立合併單元格物件
CellRangeAddress callRangeAddress = new CellRangeAddress(0, 2, 0, 7);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress1 = new CellRangeAddress(3, 4, 0, 2);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress20 = new CellRangeAddress(3, 4, 3, 7);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress21 = new CellRangeAddress(5, 6, 0, 7);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress22 = new CellRangeAddress(7, 8, 0, 2);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress31 = new CellRangeAddress(7, 8, 3, 4);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress32 = new CellRangeAddress(7, 8, 5, 7);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress34 = new CellRangeAddress(9, 10, 0, 7);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress35 = new CellRangeAddress(11, 12, 0, 2);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress36 = new CellRangeAddress(11, 12, 3, 4);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress37 = new CellRangeAddress(11, 12, 5, 7);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress38 = new CellRangeAddress(13, 14, 0, 7);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress39 = new CellRangeAddress(15, 16, 0, 7);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress40 = new CellRangeAddress(17, 18, 0, 7);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress41 = new CellRangeAddress(19, 20, 0, 7);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress42 = new CellRangeAddress(21, 22, 0, 7);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress43 = new CellRangeAddress(23, 24, 0, 7);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress44 = new CellRangeAddress(25, 26, 0, 7);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress45 = new CellRangeAddress(27, 34, 0, 7);// 起始行,結束行,起始列,結束列
CellRangeAddress callRangeAddress47 = new CellRangeAddress(35, 35, 0, 7);// 起始行,結束行,起始列,結束列
HSSFCellStyle erStyle = createCellStyle(workbook, (short) 13, true, true, false);
HSSFCellStyle sanStyle = createCellStyle(workbook, (short) 10, true, false, false);
HSSFCellStyle nameStyle = createCellStyle(workbook, (short) 10, false, false, false);
HSSFCellStyle dataStyle = createCellStyle(workbook, (short) 10, false, true, false);
// 建立工作表
HSSFSheet sheet = workbook.createSheet();
// 載入合併單元格物件
sheet.addMergedRegion(callRangeAddress);
sheet.addMergedRegion(callRangeAddress1);
sheet.addMergedRegion(callRangeAddress20);
sheet.addMergedRegion(callRangeAddress21);
sheet.addMergedRegion(callRangeAddress22);
sheet.addMergedRegion(callRangeAddress31);
sheet.addMergedRegion(callRangeAddress32);
sheet.addMergedRegion(callRangeAddress34);
sheet.addMergedRegion(callRangeAddress35);
sheet.addMergedRegion(callRangeAddress36);
sheet.addMergedRegion(callRangeAddress37);
sheet.addMergedRegion(callRangeAddress38);
sheet.addMergedRegion(callRangeAddress39);
sheet.addMergedRegion(callRangeAddress40);
sheet.addMergedRegion(callRangeAddress41);
sheet.addMergedRegion(callRangeAddress42);
sheet.addMergedRegion(callRangeAddress43);
sheet.addMergedRegion(callRangeAddress44);
sheet.addMergedRegion(callRangeAddress45);
sheet.addMergedRegion(callRangeAddress47);
// 設定預設列寬
sheet.setDefaultColumnWidth(15);
// 標題
HSSFRow rower = sheet.createRow(0);
HSSFCell celler = rower.createCell(0);
celler.setCellStyle(erStyle);
celler.setCellValue("融資租賃收費確認單");
// 客戶姓名,手機號碼
HSSFRow rowsan = sheet.createRow(3);
HSSFCell cellsan = rowsan.createCell(0);
HSSFCell cellsan2 = rowsan.createCell(3);
cellsan.setCellStyle(sanStyle);
cellsan.setCellValue("客戶姓名: " + jrUser.getRealName());
cellsan2.setCellStyle(sanStyle);
cellsan2.setCellValue("手機號碼: " + jrUser.getTelphone());
// 車型
HSSFRow rowCar = sheet.createRow(5);
HSSFCell carsan = rowCar.createCell(0);
carsan.setCellStyle(sanStyle);
if ("0".equals(jrUserOrders.getCarType())) {
carsan.setCellValue("車型: " + "新車");
} else if ("1".equals(jrUserOrders.getCarType())) {
carsan.setCellValue("車型: " + "二手車");
} else {
carsan.setCellValue("車型: " + "");
}
// 車價,購置稅,保險
HSSFRow rowpersion = sheet.createRow(7);
HSSFCell cellpersion = rowpersion.createCell(0);
HSSFCell cellpersion1 = rowpersion.createCell(3);
HSSFCell cellpersion2 = rowpersion.createCell(5);
cellpersion.setCellStyle(sanStyle);
cellpersion.setCellValue("車價: " + jrUserOrders.getCarPrice() + " 元");
cellpersion1.setCellStyle(sanStyle);
cellpersion1.setCellValue("購置稅: " + jrUserOrders.getPurchaseTax() + " 元");
cellpersion2.setCellStyle(sanStyle);
cellpersion2.setCellValue("保險: " + jrUserOrders.getInsurance() + " 元");
// 首付貸
HSSFRow rowOne = sheet.createRow(9);
HSSFCell onesan = rowOne.createCell(0);
onesan.setCellStyle(sanStyle);
onesan.setCellValue("首付貸: " + jrUserOrders.getDownPayments() + " 元");
// 車價,購置稅,保險
HSSFRow rowRz = sheet.createRow(11);
HSSFCell cellrz = rowRz.createCell(0);
HSSFCell cellqs = rowRz.createCell(3);
HSSFCell cellmonth = rowRz.createCell(5);
cellrz.setCellStyle(sanStyle);
cellrz.setCellValue("融資金額: " + jrUserOrders.getRzAmt() + " 元");
cellqs.setCellStyle(sanStyle);
cellqs.setCellValue("期數: " + jrUserOrders.getRzqs() + " 期");
cellmonth.setCellStyle(sanStyle);
cellmonth.setCellValue("月還款額: " + jrUserOrders.getMonthPay() + " 元");
// 保證金
HSSFRow rowamt = sheet.createRow(13);
HSSFCell amtsan = rowamt.createCell(0);
amtsan.setCellStyle(sanStyle);
amtsan.setCellValue("保證金: " + jrUserOrders.getBond() + " 元" + " (總額5%)");
// 手續費
HSSFRow proceduresrow = sheet.createRow(15);
HSSFCell proceduresAmt = proceduresrow.createCell(0);
proceduresAmt.setCellStyle(sanStyle);
proceduresAmt.setCellValue("手續費: " + jrUserOrders.getProceduresAmt() + " 元" + " (總額3%)");
// 續保押金
HSSFRow renewDepositrow = sheet.createRow(17);
HSSFCell renewDeposit = renewDepositrow.createCell(0);
renewDeposit.setCellStyle(sanStyle);
renewDeposit.setCellValue("續保押金: " + jrUserOrders.getRenewDeposit() + " 元");
// GPS費
HSSFRow gps = sheet.createRow(19);
HSSFCell gpssan = gps.createCell(0);
gpssan.setCellStyle(sanStyle);
gpssan.setCellValue("GPS費: " + jrUserOrders.getGpsAmt() + " 元");
// 公證費
HSSFRow notarization = sheet.createRow(21);
HSSFCell notarizationAmt = notarization.createCell(0);
notarizationAmt.setCellStyle(sanStyle);
notarizationAmt.setCellValue("公證費: " + jrUserOrders.getNotarizationAmt() + " 元");
// 家訪費
HSSFRow home = sheet.createRow(23);
HSSFCell homesan = home.createCell(0);
homesan.setCellStyle(sanStyle);
homesan.setCellValue("家訪費: " + jrUserOrders.getHomeVisitAmt() + " 元");
// 其他
HSSFRow other = sheet.createRow(25);
HSSFCell othersan = other.createCell(0);
othersan.setCellStyle(sanStyle);
othersan.setCellValue("其他: " + jrUserOrders.getHomeVisitAmt() + " 元");
// 簽名
HSSFRow png = sheet.createRow(27);
HSSFCell pngsan = png.createCell(0);
pngsan.setCellStyle(nameStyle);
pngsan.setCellValue("以上收費標準本人已確認無誤.客戶簽名: ");
HSSFPatriarch patriarch = sheet.createDrawingPatriarch();
drawPictureInfoExcel(workbook, patriarch, imageUrl);
// 簽名日期
HSSFRow pngDate = sheet.createRow(35);
HSSFCell pngDatesan = pngDate.createCell(0);
pngDatesan.setCellStyle(dataStyle);
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
pngDatesan.setCellValue("日期: " + simpleDateFormat.format(jrUserOrders.getCreatedate()));
// 5.輸出
workbook.write(outData);
// workbook.close();
// out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
/** 單元格樣式*/
private static HSSFCellStyle createCellStyle(HSSFWorkbook workbook, short fontsize, boolean flagRow, boolean flagC,boolean flagDate) {
// TODO Auto-generated method stub
HSSFCellStyle style = workbook.createCellStyle();
// 是否水平居中
if (flagRow) {
style.setVerticalAlignment(VerticalAlignment.CENTER);// 水平居中
} else {
style.setVerticalAlignment(VerticalAlignment.TOP);
}
// 建立字型
HSSFFont font = workbook.createFont();
// 是否加粗字型
if (flagC) {
style.setAlignment(HorizontalAlignment.CENTER);// 垂直居中
font.setFontHeightInPoints((short) 10);
}
if (flagDate) {
style.setAlignment(HorizontalAlignment.RIGHT);// 垂直居右
font.setFontHeightInPoints((short) 8);
}
font.setFontHeightInPoints(fontsize);
// 載入字型
style.setFont(font);
return style;
}
public static void drawPictureInfoExcel(HSSFWorkbook wb, HSSFPatriarch patriarch, String imageUrl) {
try {
URL url = new URL(imageUrl);
// 開啟連結
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
// 設定請求方式為"GET"
conn.setRequestMethod("GET");
// 超時響應時間為5秒
conn.setConnectTimeout(5 * 1000);
// 通過輸入流獲取圖片資料
InputStream inStream = conn.getInputStream();
byte[] data = readInputStream(inStream);
// anchor主要用於設定圖片的屬性
// HSSFClientAnchor hssfClientAnchor = new
// HSSFClientAnchor(dx1,dy1,dx2,dy2,col1,row1,col2,row2);
HSSFClientAnchor anchor = new HSSFClientAnchor(0, 0, 0, 0, (short) 0, 28, (short) 8, 35);
// 圖片在單元格的位置
anchor.setAnchorType(AnchorType.DONT_MOVE_AND_RESIZE);
patriarch.createPicture(anchor, wb.addPicture(data, HSSFWorkbook.PICTURE_TYPE_JPEG));
} catch (Exception e) {
e.printStackTrace();
}
}
private static byte[] readInputStream(InputStream inStream) throws Exception {
ByteArrayOutputStream outStream = new ByteArrayOutputStream();
// 建立一個Buffer字串
byte[] buffer = new byte[1024];
// 每次讀取的字串長度,如果為-1,代表全部讀取完畢
int len = 0;
// 使用一個輸入流從buffer裡把資料讀取出來
while ((len = inStream.read(buffer)) != -1) {
// 用輸出流往buffer裡寫入資料,中間引數代表從哪個位置開始讀,len代表讀取的長度
outStream.write(buffer, 0, len);
}
// 關閉輸入流
inStream.close();
// 把outStream裡的資料寫入記憶體
return outStream.toByteArray();
}
/*
* public static void main(String args[]){ //模擬部分資料 try { FileOutputStream
* fout = new FileOutputStream("I:/333.xls"); // new
* ExportExcel().getValue(fout); fout.close(); } catch (Exception e) {
* e.printStackTrace(); }
*
* }*/
}
其中單元格樣式網上大部分的POI 都是老版本的,所以有許多程式碼沒有相關的api, 上面的程式碼中單元格樣式相關API是新版的,程式碼都可以直接使用。
2. 樣式什麼的都建立好了,接下來就是使用呼叫了(controller),
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
String date = simpleDateFormat.format(new Date()).toString();
String fileName = date + jrUser.getRealName() + "/融資租賃收費確認單";
OutputStream outData = response.getOutputStream();
response.reset();
response.setContentType("application/vnd.ms-excel;charset=gbk");
response.addHeader("Content-Disposition",
"attachment;filename=" + new String((fileName + ".xls").getBytes("gbk"), "ISO-8859-1"));
ExportExcel exportExcel = new ExportExcel();
String basePath = request.getContextPath();
String imagePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ basePath + "/ui/rzJs/orders.png";
exportExcel.getValue(jrUser, jrUserOrders, imagePath, outData);
3. jsp當然少不了,當然了,如果你不是做成彈窗式下載,就可以不要彈窗jsp,把2中的程式碼改成用流寫入到本地位置即可
<form id="myform" enctype="multipart/form-data" action="<%=basePath%>/rzJrUsre/batchExport" method="post" role="form">
<table>
<tr>
<td><input type="submit" value="匯出" style="margin-left: 1550px;" /></td>
</tr>
</table>
</form>
以上程式碼都是可以直接使用的,當然瞭如果有什麼不能使用的地方,就需要各位大神自己動手改改相關程式碼了,畢竟環境,需求不可能一定相同。其實POI使用原理也挺簡單的,就是弄個模板,然後用流將資訊寫入,用流操作。明白這些使用POI也不難。
最後是Echarts,是百度的一款做報表的相關開源API,http://www.echartsjs.com/index.html 這是首頁連結,使用相對於來說跟table2一樣也挺簡單,引入js,使用api。 當然了也有其侷限性:資料量一大就不行了,不過其美觀性方面確實不錯。 這有一個基於Echarts開發的軟體:http://www.smartbi.com.cn/spreadsheet 其做的相對很好。其中大量案例,模板,可以進去看看,再根據Echarts官方的API,文件就很容易理解,上手Echarts了。
我想有了這三種製作表格的方式足以實現業務中的需求了。有不懂的, 有問題,有建議歡迎大家隨時提出,自己也是剛開始寫部落格。希望能堅持,努力下去,學無止境。
在此,希望此篇部落格能幫助到一些人。
相關推薦
報表生成(POI,jquery.table2excel.js,Echarts)
最近公司要弄個報表相關的功能,話不多說,先上圖 前一種是POI 生成的,後一種是Echarts生成的。報表我想大家都不陌生,基本上在公司業務中都會使用到。先說說POI,jquery.table2excel.js,Echarts這三種使用區別吧,本篇部落格主要是使用上,如果只是像表格那樣標準格
Excel 格式報表生成 POI步驟
@Namespace("/") @ParentPackage("json-default") @Scope("prototype") @Controller public class ReportAction extends BaseAction<WayBill>
使用jquery.table2excel.js匯出頁面列表為excel表格
最近做專案遇到了列表匯出功能,發揮程式設計師不懂就搜的風格,找到一款外掛jquery.table2excel.js; 使用時只需將該檔案下載到本地專案目錄,連結完成即可; 配置方式如下,給匯出按鈕新增點選事件: function export_list
使用Jcrop.js和jQuery.form.js,用ImageIO等進行頭像上傳縮放及裁剪
首先,Java程式碼裡帶一個獲取ImageReader的Iterator /** * 從網上摘抄的。 * 返回包含所有當前已註冊 ImageReader 的 Iterator,這些 ImageReader 聲稱能夠解碼指定格式。 *
poi生成word文件,插入圖片,echar報表生成到word,word表格
<dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>3.15</v
jquery二維碼生成插件jquery.qrcode.js
qrc cti 條碼 客戶端 code www bsp 想要 如何使用 插件描述:jquery.qrcode.js 是一個能夠在客戶端生成矩陣二維碼QRCode 的jquery插件 ,使用它可以很方便的在頁面上生成二維條碼。 轉載於:http://www.jq22.com/
記一次非常無語的生成柱狀圖,js,ecshop。
width ecs fun ner text nbsp real mov span 如題,無語且非常郁悶。 要求是根據查詢出來的數據動態生成柱狀圖。但是ecshop的查詢ajax回調都是已經封裝好了的。根本就不能改。 無奈之下只好百度了一個畫柱狀圖的代碼,每隔2秒
js/jquery獲取元素,元素篩選器
blog children stc 篩選器 node next 內容 next() des 1.js獲取元素 var test = document.getElementById("test"); var parent = test.parentNode; // 父節點
如何使用jquery.qrcode.js插件生成二維碼
hub 需要 gpo body 一個 type style 官方文檔 jsp 1、首先需要準備 jquery.qrcode.js 和 jquery.js github地址:https://github.com/lrsjng/jquery-qrcode 官方文檔地址:http
js 五 jquery的使用,調用
name attr tar 添加 offset read query -- 文檔 4 this 關鍵字 this 表示當前函數或方法的調用者 1 全局函數由window調用,所以全局函數中的this 指的是window對象 2 事件處理函數中使用t
Excel格式報表生成 (POI技術)
匯入poi報表需要的jar包 <poi.version>3.11</poi.version> <dependency> <groupId>org.apache.poi</groupId>
js生成[n,m]的隨機數,js如何生成隨機數,javascript隨機數Math.random()
一、預備知識 Math.ceil(); //向上取整。 Math.floor(); //向下取整。 Math.round(); //四捨五入。 Math.random(); //0.0 ~ 1.0 之間的一個偽隨機數。【包含0不包含1】 //
jQuery-qrcode.js 生成帶Logo 的二維碼
引入檔案 jQuery-qrcode.js 地址:https://blog-static.cnblogs.com/files/kitty-blog/jquery-qrcode.js https://blog-static.cnblogs.com/files/k
js,css隨筆(動態生成的dom做點擊事件無效)
addclass utl function form blank mon ans 默認 ++ 1.動態生成的DOM做點擊事件無效 https://blog.csdn.net/mm_hello11/article/details/79010679 2.消除button的默
JS,Jquery發起ajax的方式總結
JS中有兩種發起ajax的方式: GET方式: <script type="text/javascript"> var ajaxObj = new XMLHttpRequest(); ajaxObj.open("GET", "selectProv
使用jquery.table2excel,將HTML的table標籤資料匯出成excel,包含匯出圖片到excel
在web實際使用中,需要將頁面的表格轉換成為EXCEL表格,原想寫個原生的,但是發現一個外掛很好用——jquery.table2excel,在這寫一個簡單的demo。 程式碼 <!DOCTYPE> <html> <head>
jQuery fullpage.js 全屏滾動外掛取消滑鼠滾動事件,點選選單欄定位顯示頁面。
問題:專案中遇到一個頁面,使用了全屏滾動外掛,如下有4屏畫面。使用了 fullpage.js,現在想要取消通過滑鼠滑輪滾動來定位頁面的功能,只通過點選左側選單欄來實現的定位頁面。 (此處前提條件是,原來的滑鼠事件有效,同時點選左側選單欄也能實現定位de)
jquery結合js實現動態新增內容,並給動態新增的內容新增事件
jquery結合js實現向後臺傳送請求,給頁面動態新增內容,並給動態新增的內容新增事件.html內容如下: <button class="btn btn-md customButton" id="add_red_envelope">新增紅包&
jquery wysiwyg.js實現富文字編輯框,可複製圖片及文字
wysiwyg.js是一款十分強大的、所見即所得的jQuery富文字編輯器外掛。wysiwyg.js富文字編輯器體積小,支援選擇、鍵盤、佔位等眾多事件。而且該富文字編輯器的相容性十分好,甚至相容IE
jquery或者js彈窗事件,頁面返回時觸發的事件
頁面返回時觸發的事件!! 安卓或者ios返回上一頁時觸發的事件!! 因為此方法在開發中使用的是mui前端外掛,可以更改為jquery或者js, 更改這裡即可[email protected]上面 <script> $(functio