JS實現批量匯出多个範本

1.1 預期效果

實際業務場景中，可能會碰到從主表勾選資料，將多個子表以 Excel 的形式匯出，如下圖所示：

1.2 實現思路

主表新增自訂按鈕，給按鈕新增點選事件，獲取勾選的複選框，批量匯出指定子表。

2.1 設計主表

2.1.1 準備資料

建立普通報表，新增資料集 ds1，SQL 語句為：select * from 訂單 limit 10 

2.1.2 設計表格

1）如下圖設計表格，將欄位拖入到對應儲存格中。

• A1 儲存格：新增按鈕元件，元件名自訂。

• A3 儲存格：新增複選按鈕元件，此處注意複選按鈕元件左父格需設定為 B3。

2）設定重複標題欄為第 1 行至第 2 行，並設定填報凍結，凍結第 1 行至第 2 行，如下圖所示：

2.1.3 新增事件

選中 A1 儲存格，新增「點選」事件，如下圖所示：

JavaScript 程式碼如下:

var $span = $('.fr-checkbox-checkon'); //獲取選中的複選框  
var $tds = $("td").has($span); //定義選中複選框的儲存格   
var $trs = $("tr").has($tds);
for (var i = 1; i < $trs.length; i++) {
var name = $("td:eq(2)", $($trs[i])).find("div").html();  //獲取選中的C3儲存格的值 
//alert(name);
window.open("http://localhost:8075/webroot/decision/view/report?viewlet=%25E6%2589%25B9%25E9%2587%258F%25E5%25AF%25BC%25E5%2587%25BA_%25E5%25AD%2590%25E8%25A1%25A8.cpt&op=write&id="+name+"&format=excel&extype=simple"+"&__filename__="+name);
} //子報表設計完成後，點選填報預覽，將子表的URL複製到&id之前

2.1.4 報表效果

儲存報表，重新命名為「批量匯出_主表」，點選「填報預覽」，預覽下主表的效果，如下圖所示：

2.2 設計子表

2.2.1 準備資料

建立普通報表，建立資料集 ds1，SQL 語句為：

select

d.訂單ID,d.貨主名稱,d.貨主地址,d.訂購日期,dm.產品ID,dm.單價,dm.數量,dm.進價,dm.折扣

from 訂單 d

left join 訂單明細 dm on d.訂單ID=dm.訂單ID

where d.訂單ID='${ID}'

2.2.2 設計表格

如下圖設計表格，將欄位拖入到對應儲存格內。

2.2.3 儲存報表

儲存報表，重新命名為批量「匯出_子表」，點選「填報預覽」，將子表的 URL copy到主表點選事件的程式碼中。

2.3 效果預覽

主表點選「填報預覽」，複選幾個子訂單，點選「匯出」按鈕，即可匯出對應的子表，如下圖所示：

注：不支援行動端。

已完成範本可參見：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\ExcelImport\批量匯出_主表.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\ExcelImport\批量匯出_子表.cpt

點選下載範本：

批量匯出_主表.cpt

批量匯出_子表.cpt

注：如果發現點選後，只匯出一個 Excel 的話，確認程式碼無誤的情況下，需要把瀏覽器的禁止彈窗設為允許。