報表控件Activereports使用教程：如何使用JS Viewer API
ActiveReports 是一款專注于 .NET 和 .NET Core 平臺的報表控件。通過拖拽式報表設計器，可以快速地設計 Excel表格、Word文檔、圖表、數據過濾、數據鉆取、精準套打等類型報表，全面滿足 WinForm、ASP.NET、ASP.NET MVC、WPF 平臺中各種報表的開發需要。同時，通過豐富的 API 可以靈活的實現報表創建、加載和運行時的個性化自定義需求。
初始化Viewer 的選項設置
以下方式是在初始化Viewer 中會被執行的
說明: JSViewer 實現報表導航，如鉆取，跳轉URL，跳轉書簽，折疊展開控件時所執行的回調函數。
類型: function(actionType, actionParams)回調函數
示例：:
action: (actionType, actionParams) => console.log('Action type: ' + actionType + '; Action parameters: ' + actionParams)
說明: 是用于設置所提供的導出文件的格式，在不設置該選項時候，JSViewer 默認是支持所有格式導出，PDF, Excel, Word, JSON, XML, CSV, 圖像
類型: Array(數組)
示例:
availableExports: ['Xml', 'Pdf']
說明: 設置Viewer 是單頁顯示還是連續一頁加載
類型: String（字符串）
可識別的值: 'single', 'continuous'
示例:
displayMode: 'Continuous'
說明: 當報表文檔從服務器中完全加載完成后執行的回調函數。
類型: function() 回調函數
示例：
documentLoaded: () => console.log('The document is loaded entirely on the server')
返回值: Void 空
說明 JQuery 選擇器，用于綁定JSViewer 的宿主對象。
類型: String
示例：:
element: '#viewerContainer'
說明 : 當加載報表發生錯誤時候，所執行的的錯誤提示回調函數。如果回調函數返回的是True默認的錯誤提示面板就不會出現了。錯誤參數是一個包含message屬性的對象，開發人員可自定義錯誤提示信息。
類型: function(error) 回調函數
示例: 隱藏默認的錯誤面板
error: (error) => {
if (error.message) {
// show error message.
alert("Internal error! Please ask administrator.");
// do not show default error message.
}
}
說明: 指定JS Viewer 加載報表的標識（或路徑）
類型: String
示例:
reportID: 'AnnualReport.rdlx'
說明: JSViewer 獲取關于請求報表時所執行的回調函數，該回調函數會包含 reportInfo 對象，包含報表名稱目錄信息，參數信息，以及渲染報表結果的鏈接。
類型: function(reportInfo)
Example:
reportLoaded: (reportInfo) => console.log('The report ' + reportInfo.name+ ' was successfully loaded!')
說明: {name, value} 鍵值對的數組，用于為報表傳遞對應的參數值。
類型: Array（數組）
示例:
reportParameters: [{ name: 'ReportParameter1', values: ['1']}]
說明: 連接 WebAPI 的設置
類型:.包含URL 及可選的securityToken 屬性的對象
示例:
reportService: {
url: '//example.com/api/reporting', securityToken: '42A9CD80A4F3445A9BB60A221D042FCC',
};
可調用的API 方法及屬性
方法:
說明: 常用于報表鉆取，報表鉆取到子報表時，使用該方法可以讓Viewer 返回到主報表。
類型: backToParent()Void
示例:
viewer.backToParent()
返回值: Void
create
說明: 新建一個新的Viewer 實例，并在指定的 DOM 元素中加載它。
Syntax: create()Void
Parameters:
- params
Example:
const viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx',
availableExports: ['Xml', 'Pdf'],
// other properties
});
Return Value: Void
說明: 從當前元素中刪除Viewer
Syntax: destroy()Void
Example:
viewer.destroy()
Return Value: Void
說明: 導出當前報表
Syntax: export(exportType,callback,saveAsDialog,settings)Void
Parameters:
- exportType: 指定導出格式.
- settings: RenderingExtensions所提供的導出設置
示例:
viewer.export('Pdf', downloadReport, true, { Title: '1997 Annual Report' })
Return Value: Void
說明: 獲取報表目錄 TOC.
Syntax: viewer.getToc()
Example:
console.log(viewer.getToc())
Return Value: any
說明: 指定Viewer 展示特定頁的報表
Syntax: goToPage(number, offset, callback)Void
Parameters:
- number: The number of pages to go to.
Example:
viewer.goToPage(1)
Return Value: Void
說明: 加載指定的報表文件報表
Syntax: openReport(reportID: string, reportParameters?: Array
Parameters:
- reportID: The id of the report.
Example:
viewer.openReport('Invoice.rdlx')
Return Value: Void
說明: 打印當前展示的報表.
Syntax: print()Void
Example:
viewer.print()
Return Value: Void
說明: 刷新報表預覽頁面
Syntax: option(name,[value])Object
Example:
viewer.refresh()
Return Value: Void
說明: 獲取當前JSViewer 的版本。
Syntax: viewer.version
Example:
console.log(viewer.version)
Return Value: string
說明: 獲取或設置JS Viewer 的渲染模式
Type: String
Accepted Value: 'Galley', 'Paginated'
Example:
viewer.renderMode = 'Galley';
說明: 為工具欄添加自定義按鈕
Type: item: ToolbarItem
Example:
ToolbarItem = {
key: string;
iconCssClass?: string;
icon?: Icon;
text?: string;
title?: string;
checked?: boolean;
enabled?: boolean;
action?: (toolbarItem) => function;
onUpdate?: (args: ChangedEventArgs, toolbarItem) => function;
}
Icon = FontIcon | SVGIcon;
SVGIcon = {
type: 'svg';
content: any; //(string | JSX.element)
size?: Size;
rotate?: '90' | '180' | '270';
};
FontIcon = {
type: 'font';
iconCssClass: string;
fontSize?: string;
}
var pdfExportButton = {
key: '$pdfExportButtonKey',
iconCssClass: 'mdi mdi-file-pdf',
enabled: true,
action: function(item) {
console.log('Export to PDF function works here');
},
onUpdate: function(arg, item) {
console.log('Something in viewer was updated, check/update button state here');
}
};
//OR button with svg as icon
var icon = `
`;
var svgPdfExportButton = {
key: '$pdfExportButtonKey',
icon: {type: 'svg', content: icon},
enabled: true,
action: function(item) {
console.log('Export to PDF function works here');
},
onUpdate: function(arg, item) {
console.log('Something in viewer was updated, check/update button state here');
}
}
viewer.toolbar.addItem(pdfExportButton);
//or
viewer.toolbar.addItem(svgPdfExportButton);
說明: 更新設置某一工具欄按鈕的布局，功能或狀態
Type: String: key, ToolbarItem item
Example:
var xlsxExportButton = {
key: '$xlsxExportButtonKey',
iconCssClass: 'mdi mdi-file-pdf',
enabled: true,
action: function(item) { console.log('Export to XLSX function works here'); },
onUpdate: function(arg, item) { console.log('Something in viewer was updated, check/update button state here'); }
};
viewer.toolbar.updateItem('$pdfExportButtonKey', xlsxExportButton); //from now button will behave as described in new properties
說明: 刪除工具欄的自定義的按鈕。如果要刪除默認的工具欄按鈕, 需要調用 updateLayout 函數
Type: String: key
Example:
viewer.toolbar.removeItem('$pdfExportButtonKey');
說明: 設置側邊欄可見或隱藏。如果不傳遞值，默認是隱藏。
Type: boolean
Example:
viewer.sidebar.toggle(true);;//will hide it viewer.toggleSidebar(false);//will show it
可用屬性
說明: 獲取當前加載頁碼
Syntax: viewer.currentPage
Example:
console.log(viewer.currentPage()) Return Value: An integer representing currently displayed page number.
說明: 獲取當前報表的總頁數
Syntax: viewer.pageCount
Example:
console.log(viewer.pageCount())
Return Value: An integer representing page count.
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線