JS實現匯出檔案名稱隨篩選值變化

1.1 問題描述

報表匯出時，檔案名稱預設為範本名稱，可以在「範本>範本Web屬性>基本>標題」處修改。如果想要匯出檔案的名稱跟隨篩選框的值動態變化，該如何實現呢？

1.2 實現思路

方法一：透過範本 Web 屬性中的標題實現自訂匯出檔案名稱。

方法二：在匯出按鈕下的事件中的 JavaScript 腳本中,透過__filename__參數修改匯出檔案的名稱。

2.1 方法一

1）開啟%FR_HOME%\webapps\webroot\WEB-INF\reportlets\GettingStarted.cpt。

2）修改 ds1：SELECT * FROM 銷量 where 地區 ='${Diqu}'。

3）點選選單「範本>範本參數」，新增範本參數Riqi。

4）點選選單「範本>範本 Web 屬性」，輸入標題：${Diqu+"_地區_"+Riqi}。

5）修改範本標題為動態標題：$Diqu + "地區銷售概況"。

6）開啟參數面板，刪除查詢按鈕，將下拉框按鈕的元件名修改為 Diqu：

7）在參數面板新增標籤元件，元件值為：匯出日期：，新增日期元件，元件名稱修改為：Riqi，元件值選擇公式：TODAY()。

8）給下拉框元件 Diqu 和日期元件 Riqi 新增編輯後事件，實現自動查詢：

JavaScript 程式碼如下：

_g().parameterCommit();

9）新增一個按鈕元件，元件名稱改為：匯出，新增點選事件：

JavaScript 程式碼如下：

注1：${servletURL}?viewlet=11-JS實現自訂匯出檔案名稱-方法一.cpt 中的 11-JS實現自訂匯出檔案名稱-方法一.cpt 非固定，需根據實際範本名稱和範本儲存位置修改。

注2：Diqu、Riqi 是參數名稱，預設是在當前頁面匯出的。

var DIQU = _g().getParameterContainer().getWidgetByName("Diqu").getValue();
var RIQI = _g().getParameterContainer().getWidgetByName("Riqi").getValue();
var REPORT_URL = '${servletURL}?viewlet=11-JS實現自訂匯出檔案名稱-方法一.cpt&Diqu=' + DIQU + '&Riqi=' + RIQI + '&format=excel';
window.location = (encodeURI(encodeURI(REPORT_URL)));

10）點選參數面板空白處，在右側的屬性面板中，將點選查詢前不顯示報表內容的勾去掉。

2.2 方法二

1）在上節所示基礎上進行修改，清除「範本>範本 Web 屬性」內的標題。

2）修改點選事件

選擇匯出按鈕，編輯點選事件，修改js程式碼：

JavaScript 程式碼如下：

注：${servletURL}?viewlet=11-JS實現自訂匯出檔案名稱-方法一.cpt 中的 11-JS實現自訂匯出檔案名稱-方法二.cpt 非固定，需根據實際範本名稱和範本儲存位置修改。

var DIQU = _g().getParameterContainer().getWidgetByName("Diqu").getValue();
var RIQI = _g().getParameterContainer().getWidgetByName("Riqi").getValue();
var name = DIQU + "_地區_" + RIQI;
var REPORT_URL = '${servletURL}?viewlet=11-JS實現自訂匯出檔案名稱-方法二.cpt&Diqu=' + DIQU + '&Riqi=' + RIQI + '&format=excel' + '&__filename__=' + name;
window.location = (encodeURI(encodeURI(REPORT_URL)));

2.3 預覽效果

儲存範本，點選分頁預覽，PC 端效果如下所示：

注：行動端不支援各種列印和匯出方式。  

1）方法一

已完成的範本，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\參數介面JS實體\11-JS實現自訂匯出檔案名稱-方法一.cpt

點選下載範本：11-JS實現自訂匯出檔案名稱-方法一.cpt

2）方法二

已完成的範本，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\參數介面JS實體\11-JS實現自訂匯出檔案名稱-方法二.cpt

點選下載範本：11-JS實現自訂匯出檔案名稱-方法二.cpt