文档彩票走势图>>ActiveReports使用教程2020>>报表控件Activereports使用教程：如何使用JS Viewer API

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

ActiveReports 是一款专注于 .NET 和 .NET Core 平台的报表控件。通过拖拽式报表设计器，可以快速地设计 Excel表格、Word文档、图表、数据过滤、数据钻取、精准套打等类型报表，全面满足 WinForm、ASP.NET、ASP.NET MVC、WPF 平台中各种报表的开发需要。同时，通过丰富的 API 可以灵活的实现报表创建、加载和运行时的个性化自定义需求。

点击下载ActiveReports最新试用版

初始化Viewer 的选项设置

以下方式是在初始化Viewer 中会被执行的

action

说明: JSViewer 实现报表导航，如钻取，跳转URL，跳转书签，折叠展开控件时所执行的回调函数。

类型: function(actionType, actionParams)回调函数

示例：:

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

availableExports

说明: 是用于设置所提供的导出文件的格式，在不设置该选项时候，JSViewer 默认是支持所有格式导出，PDF, Excel, Word, JSON, XML, CSV, 图像

类型: Array(数组)

示例:

availableExports: ['Xml', 'Pdf']

displayMode

说明: 设置Viewer 是单页显示还是连续一页加载

类型: String（字符串）

可识别的值: 'single', 'continuous'

示例:

displayMode: 'Continuous'

documentLoaded

说明: 当报表文档从服务器中完全加载完成后执行的回调函数。

类型: function() 回调函数

示例：

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

返回值: Void 空

element

说明 JQuery 选择器，用于绑定JSViewer 的宿主对象。

类型: String

示例：:

element: '#viewerContainer'

error

说明 : 当加载报表发生错误时候，所执行的的错误提示回调函数。如果回调函数返回的是True默认的错误提示面板就不会出现了。错误参数是一个包含message属性的对象，开发人员可自定义错误提示信息。

类型: function(error) 回调函数

示例: 隐藏默认的错误面板

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 获取关于请求报表时所执行的回调函数，该回调函数会包含 reportInfo 对象，包含报表名称目录信息，参数信息，以及渲染报表结果的链接。

类型: function(reportInfo)

Example:

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

reportParameters

说明: {name, value} 键值对的数组，用于为报表传递对应的参数值。

类型: Array（数组）

示例:

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

reportService

说明: 连接 WebAPI 的设置

类型:.包含URL 及可选的securityToken 属性的对象

示例:

reportService: {

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

};

可调用的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所提供的导出设置

注意: 区域报表的导出设置在使用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

说明: 更新设置某一工具栏按钮的布局，功能或状态

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

说明: 删除工具栏的自定义的按钮。如果要删除默认的工具栏按钮, 需要调用 updateLayout 函数

Type: String: key

Example:

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

toggleSidebar

说明: 设置侧边栏可见或隐藏。如果不传递值，默认是隐藏。

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

说明: 获取当前报表的总页数

Syntax: viewer.pageCount

Example:

console.log(viewer.pageCount())

Return Value: An integer representing page count.

彩票走势图

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

方法:

可用属性

用科技创就卓越

Create excellence with technology