報表控件Activereports使用教程：如何使用JS Viewer API

---

ActiveReports 是一款專注于 .NET 和 .NET Core 平臺的報表控件。通過拖拽式報表設計器，可以快速地設計 Excel表格、Word文檔、圖表、數(shù)據(jù)過濾、數(shù)據(jù)鉆取、精準套打等類型報表，全面滿足 WinForm、ASP.NET、ASP.NET MVC、WPF 平臺中各種報表的開發(fā)需要。同時，通過豐富的 API 可以靈活的實現(xiàn)報表創(chuàng)建、加載和運行時的個性化自定義需求。

點擊下載ActiveReports最新試用版

初始化Viewer 的選項設置

以下方式是在初始化Viewer 中會被執(zhí)行的

action

說明: JSViewer 實現(xiàn)報表導航，如鉆取，跳轉(zhuǎn)URL，跳轉(zhuǎn)書簽，折疊展開控件時所執(zhí)行的回調(diào)函數(shù)。

類型: function(actionType, actionParams)回調(diào)函數(shù)

示例：:

action: (actionType, actionParams) => console.log('Action type: ' + actionType + '; Action parameters: ' + actionParams)

availableExports

說明: 是用于設置所提供的導出文件的格式，在不設置該選項時候，JSViewer 默認是支持所有格式導出，PDF, Excel, Word, JSON, XML, CSV, 圖像

類型: Array(數(shù)組)

示例:

availableExports: ['Xml', 'Pdf']

displayMode

說明: 設置Viewer 是單頁顯示還是連續(xù)一頁加載

類型: String（字符串）

可識別的值: 'single', 'continuous'

示例:

displayMode: 'Continuous'

documentLoaded

說明: 當報表文檔從服務器中完全加載完成后執(zhí)行的回調(diào)函數(shù)。

類型: function() 回調(diào)函數(shù)

示例：

documentLoaded: () => console.log('The document is loaded entirely on the server')

返回值: Void 空

element

說明 JQuery 選擇器，用于綁定JSViewer 的宿主對象。

類型: String

示例：:

element: '#viewerContainer'

error

說明 :  當加載報表發(fā)生錯誤時候，所執(zhí)行的的錯誤提示回調(diào)函數(shù)。如果回調(diào)函數(shù)返回的是True默認的錯誤提示面板就不會出現(xiàn)了。錯誤參數(shù)是一個包含message屬性的對象，開發(fā)人員可自定義錯誤提示信息。

類型: function(error) 回調(diào)函數(shù)

示例: 隱藏默認的錯誤面板

error: (error) => {

    if (error.message) {

        // show error message.

        alert("Internal error! Please ask administrator.");

        // do not show default error message.

    }

}

reportID

說明: 指定JS Viewer 加載報表的標識（或路徑）

類型: String

示例:

reportID: 'AnnualReport.rdlx'

reportLoaded

說明:  JSViewer 獲取關(guān)于請求報表時所執(zhí)行的回調(diào)函數(shù)，該回調(diào)函數(shù)會包含 reportInfo 對象，包含報表名稱目錄信息，參數(shù)信息，以及渲染報表結(jié)果的鏈接。

類型: function(reportInfo)

Example:

reportLoaded: (reportInfo) => console.log('The report ' + reportInfo.name+ ' was successfully loaded!')

reportParameters

說明: {name, value} 鍵值對的數(shù)組，用于為報表傳遞對應的參數(shù)值。

類型: Array（數(shù)組）

示例:

reportParameters: [{ name: 'ReportParameter1', values: ['1']}]

reportService

說明: 連接 WebAPI 的設置

類型:.包含URL 及可選的securityToken 屬性的對象

示例:

reportService: {

    url: 'http://example.com/api/reporting', securityToken: '42A9CD80A4F3445A9BB60A221D042FCC',

};

可調(diào)用的API 方法及屬性

方法:

backtoParent

說明: 常用于報表鉆取，報表鉆取到子報表時，使用該方法可以讓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

destroy

說明: 從當前元素中刪除Viewer

Syntax: destroy()Void

Example:

viewer.destroy()

Return Value: Void

export

說明: 導出當前報表

Syntax: export(exportType,callback,saveAsDialog,settings)Void

Parameters:

• exportType: 指定導出格式.
• settings: RenderingExtensions所提供的導出設置

注意: 區(qū)域報表的導出設置在使用rendering extensions時候不可用,。頁面報表和RDL 報表使用Export Filter 導出PDF時不可用。

示例:

viewer.export('Pdf', downloadReport, true, { Title: '1997 Annual Report' })

Return Value: Void

getTOC

說明: 獲取報表目錄 TOC.

Syntax: viewer.getToc()

Example:

console.log(viewer.getToc())

Return Value: any

goToPage

說明: 指定Viewer 展示特定頁的報表

Syntax: goToPage(number, offset, callback)Void

Parameters:

• number: The number of pages to go to.

Example:

viewer.goToPage(1)

Return Value: Void

openReport

說明: 加載指定的報表文件報表

Syntax: openReport(reportID: string, reportParameters?: Array): void

Parameters:

• reportID: The id of the report.

Example:

viewer.openReport('Invoice.rdlx')

Return Value: Void

Print

說明: 打印當前展示的報表.

Syntax: print()Void

Example:

viewer.print()

Return Value: Void

Refresh

說明: 刷新報表預覽頁面

Syntax: option(name,[value])Object

Example:

viewer.refresh()

Return Value: Void

Version

說明: 獲取當前JSViewer 的版本。

Syntax: viewer.version

Example:

console.log(viewer.version)

Return Value: string

renderMode

說明: 獲取或設置JS Viewer 的渲染模式

Type: String

Accepted Value: 'Galley', 'Paginated'

Example:

viewer.renderMode = 'Galley';

toolbar.addItem

說明: 為工具欄添加自定義按鈕

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);

toolbar.updateItem

說明:  更新設置某一工具欄按鈕的布局，功能或狀態(tài)

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

toolbar.removeItem

說明:  刪除工具欄的自定義的按鈕。如果要刪除默認的工具欄按鈕, 需要調(diào)用 updateLayout 函數(shù)

Type: String: key

Example:

viewer.toolbar.removeItem('$pdfExportButtonKey');

toggleSidebar

說明: 設置側(cè)邊欄可見或隱藏。如果不傳遞值，默認是隱藏。

Type: boolean

Example:

viewer.sidebar.toggle(true);;//will hide it viewer.toggleSidebar(false);//will show it

可用屬性

currentPage

說明: 獲取當前加載頁碼

Syntax: viewer.currentPage

Example:

console.log(viewer.currentPage())

Return Value: An integer representing currently displayed page number.

pageCount

說明: 獲取當前報表的總頁數(shù)

Syntax: viewer.pageCount

Example:

console.log(viewer.pageCount())

Return Value: An integer representing page count.

如果你對我們的產(chǎn)品感興趣或者有任何疑問，歡迎咨詢慧都在線客服>>