JS實現預定義匯出按鈕

1.1 問題描述

JS實現匯出檔案名稱隨篩選值變化 中，可以在範本「參數面板」中自訂匯出按鈕，利用 JS 實現自訂匯出檔案名稱。當很多範本都要實現這個功能時，每個範本都寫一遍 JS，比較麻煩。所以可以預定義一個匯出按鈕，需要時就可以直接拖曳新增。如下圖所示：

1.2 實現思路

透過「元件管理」自訂一個匯出按鈕，按鈕新增 JS 事件，實現匯出功能。

2.1 預定義按鈕

1）設計器菜單欄開啟「伺服器>元件管理」。如下圖所示：

2）建立一個元件，並設定屬性。如下圖所示：

①點選「加號」建立一個元件

②雙擊修改名稱為「匯出」

③選擇元件類型為「按鈕元件」

④元件名為「export」

⑤按鈕類型為「普通」，按鈕名稱為「匯出」

3）點選「事件」，新增參數與 JS 程式碼，然後點選右下角「確定」。如下圖所示：

參數如下：

servletURL：公式servletURL

reportName：公式reportName

exportName：公式indexofarray(split(indexofarray(REVERSEARRAY(split(reportName,"/")),1),".c"),1)+"_"+format(now(),"yyyyMMddHHmm")，此處自訂檔案名稱。

JavaScript 程式碼如下：

注：此程式碼實現的預設匯出檔案名稱為：範本名稱_匯出時間（具體到分鐘）。

//定義報表URL,透過內建參數 servletURL、reportName 獲取對應範本的路徑和名稱
var url=servletURL+"?viewlet="+reportName;
//遍歷參數面板元件，獲取對應的參數值。
$.each(this.options.form.name_widgets,function(i,item) {
      if(item.options.type!== 'label'&&item.getName()!="PARA"&&item.getName()!="SEARCH"&&item.getName()!="EXPORT") {
      url+="&"+item.getName()+"="+item.getValue();
    }
});
//在URL上加上列印參數
url+="&format=excel&extype=simple&__filename__="+exportName;
window.location=encodeURI(encodeURI(url));//轉碼匯出

2.2 使用按鈕

開啟一個範本，如內建範本：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\GettingStarted

1）在參數面板工具欄，點選「小三角符」就可以看到自訂的匯出按鈕，按住可以拖動到參數面板使用。如下圖所示：

2）儲存範本，點選「分頁預覽」，查詢出報表內容後點選「匯出」按鈕即可匯出Excel，效果如下圖所示：

注：不支援行動端。

點選下載範本：JS實現預定義匯出按鈕.cpt