1. 程式人生 > >報表生成(POI,jquery.table2excel.js,Echarts)

報表生成(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.jsEcharts)

  最近公司要弄個報表相關的功能,話不多說,先上圖    前一種是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.jsjQuery.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/

記一次非常無語的生成柱狀圖jsecshop。

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

jsjquery的使用調用

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

jscss隨筆(動態生成的dom做點擊事件無效)

addclass utl function form blank mon ans 默認 ++ 1.動態生成的DOM做點擊事件無效 https://blog.csdn.net/mm_hello11/article/details/79010679 2.消除button的默

JSJquery發起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