示例
查看SSRS报告
此示例说明如何在Wijmo ReportViewer控件中查看来自C1 Web API报表服务的SSRS报表。
要从C1 Web API报告服务显示SSRS报告的内容，请设置以下基本属性：
- serviceUrl： C1 Web API报告服务的URL。例如，“https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report”。
- filePath： 服务器上SSRS报告的完整路径。例如，“c1ssrs/AdventureWorks/Company Sales”。
“c1ssrs”是报告提供程序的密钥，它在服务器上注册指定的报告(对于“https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report”，“c1ssrs”是链接到SSRS服务器“http://ssrs.componentone.com:8000/ReportServer”)的报告提供程序的密钥。
“AdventureWorks / Company Sales”是服务器上报告的完整路径。
C1 Web API报告服务使用C1SSRSDocumentSource连接SSRS服务器并呈现SSRS报告。它首先从服务器获取数据，然后将报告转换为所需的格式（通常为HTML5 SVG）。有关详细信息，请参阅如何设置C1 Web API报告服务。
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import * as viewer from '@grapecity/wijmo.viewer';
import { getReports } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
let reportViewer = new viewer.ReportViewer('#reportViewer', {
serviceUrl: 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report'
});
let lbReports = document.querySelector('#reports');
lbReports.addEventListener('change', () => loadReport());
//
// fill reports list
fillReportList(getReports());
loadReport();
//
function fillReportList(reports) {
let selCat = reports.selectedReport.categoryName, selRep = reports.selectedReport.reportName;
//
reports.categories.forEach(cat => {
let optGroup = createComboOptionGroup(cat.text);
//
cat.reports.forEach(rep => {
let option = createComboOption(rep.reportTitle, 'c1ssrs/' + rep.reportPath);
//
option.selected = cat.name === selCat && rep.reportName == selRep;
optGroup.appendChild(option);
});
//
lbReports.appendChild(optGroup);
});
}
//
function loadReport() {
reportViewer.filePath = lbReports.value;
}
//
function createComboOptionGroup(text) {
let optGroup = document.createElement('optgroup');
optGroup.label = text;
return optGroup;
}
//
function createComboOption(text, value) {
let option = document.createElement('option');
option.innerHTML = text;
option.value = value;
return option;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Viewing SSRS reports</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<div class="row report-names">
<label for="reports">Selected SSRS Report:</label>
<select id="reports" class="combobox"></select>
</div>
<div id="reportViewer"></div>
</div>
</body>
</html>
//
export function getReports() {
return {
selectedReport: {
categoryName: 'AdventureWorks',
reportName: 'Company Sales'
},
categories: [
{
name: 'AdventureWorks',
text: 'Adventure Works',
reports: [
{
reportPath: 'AdventureWorks/Company Sales',
reportName: 'Company Sales',
reportTitle: 'Company Sales'
},
{
reportPath: 'AdventureWorks/Customers Near Stores',
reportName: 'Customers Near Stores',
reportTitle: 'Customers Near Stores'
},
{
reportPath: 'AdventureWorks/Employee Sales Summary Detail',
reportName: 'Employee Sales Summary Detail',
reportTitle: 'Employee Sales Summary Detail'
},
{
reportPath: 'AdventureWorks/Product Catalog',
reportName: 'Product Catalog',
reportTitle: 'Product Catalog'
},
{
reportPath: 'AdventureWorks/Product Line Sales',
reportName: 'Product Line Sales',
reportTitle: 'Product Line Sales'
},
{
reportPath: 'AdventureWorks/Sales by Region',
reportName: 'Sales by Region',
reportTitle: 'Sales by Region'
},
{
reportPath: 'AdventureWorks/Store Contacts',
reportName: 'Store Contacts',
reportTitle: 'Store Contacts'
},
{
reportPath: 'AdventureWorks/Territory Sales Drilldown',
reportName: 'Territory Sales Drilldown',
reportTitle: 'Territory Sales Drilldown'
}
]
}
]
};
}
body {
margin-bottom: 24px;
}
label {
margin-right: 3px;
}
.wj-viewer {
width: 100%;
display: block;
}
.report-names {
margin: 10px;
}
@media print {
.report-names {
display: none;
}
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import { Component, enableProdMode, NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { WjViewerModule } from '@grapecity/wijmo.angular2.viewer';
import { getReports, TReportCategory } from './app.data';
//
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
categories: TReportCategory[];
filePath: string;
//
constructor() {
let reports = getReports();
//
this.categories = reports.categories;
this.filePath = `c1ssrs/${reports.selectedReport.categoryName}/${reports.selectedReport.reportName}`;
}
}
//
@NgModule({
imports: [WjViewerModule, BrowserModule, FormsModule, HttpClientModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
//
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Viewing SSRS reports</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="container-fluid">
<div class="row report-names">
<label for="reports">Selected SSRS Report:</label>
<select id="reports" class="combobox" [(ngModel)]="filePath">
<ng-template ngFor let-cat [ngForOf]="categories">
<optgroup *ngIf="cat.reports" label="{{cat.text}}">
<option *ngFor="let rep of cat.reports" [value]="'c1ssrs/' + rep.reportPath">
{{rep.reportTitle}}
</option>
</optgroup>
</ng-template>
</select>
</div>
<wj-report-viewer [serviceUrl]="'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report'"
[filePath]="filePath">
</wj-report-viewer>
</div>
export type TReport = {
reportPath: string;
reportName: string;
reportTitle: string;
};
//
export type TReportCategory = {
name: string;
text: string;
reports: TReport[];
};
//
export type TReports = {
selectedReport: {
categoryName: string;
reportName: string;
};
categories: TReportCategory[];
};
//
export function getReports() {
return <TReports>{
selectedReport: {
categoryName: 'AdventureWorks',
reportName: 'Company Sales'
},
categories: [
{
name: 'AdventureWorks',
text: 'Adventure Works',
reports: [
{
reportPath: 'AdventureWorks/Company Sales',
reportName: 'Company Sales',
reportTitle: 'Company Sales'
},
{
reportPath: 'AdventureWorks/Customers Near Stores',
reportName: 'Customers Near Stores',
reportTitle: 'Customers Near Stores'
},
{
reportPath: 'AdventureWorks/Employee Sales Summary Detail',
reportName: 'Employee Sales Summary Detail',
reportTitle: 'Employee Sales Summary Detail'
},
{
reportPath: 'AdventureWorks/Product Catalog',
reportName: 'Product Catalog',
reportTitle: 'Product Catalog'
},
{
reportPath: 'AdventureWorks/Product Line Sales',
reportName: 'Product Line Sales',
reportTitle: 'Product Line Sales'
},
{
reportPath: 'AdventureWorks/Sales by Region',
reportName: 'Sales by Region',
reportTitle: 'Sales by Region'
},
{
reportPath: 'AdventureWorks/Store Contacts',
reportName: 'Store Contacts',
reportTitle: 'Store Contacts'
},
{
reportPath: 'AdventureWorks/Territory Sales Drilldown',
reportName: 'Territory Sales Drilldown',
reportTitle: 'Territory Sales Drilldown'
}
]
}
]
};
}
body {
margin-bottom: 24px;
}
label {
margin-right: 3px;
}
.wj-viewer {
width: 100%;
display: block;
}
.report-names {
margin: 10px;
}
@media print {
.report-names {
display: none;
}
}
<template>
<div class="container-fluid">
<div class="row report-names">
<label for="reports">Selected SSRS Report:</label>
<select id="reports" class="combobox" v-model="filePath">
<optgroup v-for="cat in categories" :key="cat.name" :label="cat.text">
<option v-for="rep in cat.reports" :key="rep.reportPath" :value="'c1ssrs/' + rep.reportPath">
{{rep.reportTitle}}
</option>
<optgroup>
</select>
</div>
<wj-report-viewer serviceUrl="https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report"
:filePath="filePath">
</wj-report-viewer>
</div>
</template>
<script>
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import Vue from 'vue';
import '@grapecity/wijmo.vue2.viewer';
import { getReports } from './data';
//
new Vue({
el: '#app',
data: {
categories: null,
filePath: ''
},
created() {
let reports = getReports();
//
this.categories = reports.categories;
this.filePath = `c1ssrs/${reports.selectedReport.categoryName}/${reports.selectedReport.reportName}`;
}
});
</script>
<style>
body {
margin-bottom: 24px;
}
label {
margin-right: 3px;
}
.container-fluid .wj-viewer {
width: 100%;
display: block;
}
.report-names {
margin: 10px;
}
@media print {
.report-names {
display: none;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Viewing SSRS reports</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
export function getReports() {
return {
selectedReport: {
categoryName: 'AdventureWorks',
reportName: 'Company Sales'
},
categories: [
{
name: 'AdventureWorks',
text: 'Adventure Works',
reports: [
{
reportPath: 'AdventureWorks/Company Sales',
reportName: 'Company Sales',
reportTitle: 'Company Sales'
},
{
reportPath: 'AdventureWorks/Customers Near Stores',
reportName: 'Customers Near Stores',
reportTitle: 'Customers Near Stores'
},
{
reportPath: 'AdventureWorks/Employee Sales Summary Detail',
reportName: 'Employee Sales Summary Detail',
reportTitle: 'Employee Sales Summary Detail'
},
{
reportPath: 'AdventureWorks/Product Catalog',
reportName: 'Product Catalog',
reportTitle: 'Product Catalog'
},
{
reportPath: 'AdventureWorks/Product Line Sales',
reportName: 'Product Line Sales',
reportTitle: 'Product Line Sales'
},
{
reportPath: 'AdventureWorks/Sales by Region',
reportName: 'Sales by Region',
reportTitle: 'Sales by Region'
},
{
reportPath: 'AdventureWorks/Store Contacts',
reportName: 'Store Contacts',
reportTitle: 'Store Contacts'
},
{
reportPath: 'AdventureWorks/Territory Sales Drilldown',
reportName: 'Territory Sales Drilldown',
reportTitle: 'Territory Sales Drilldown'
}
]
}
]
};
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './app.css';
//
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as wjViewer from '@grapecity/wijmo.react.viewer';
import { getReports } from './data';
class App extends React.Component {
constructor(props) {
super(props);
this.reports = getReports();
this.state = {
categories: this.reports.categories,
filePath: 'c1ssrs/' + this.reports.selectedReport.categoryName + "/" + this.reports.selectedReport.reportName
};
}
render() {
return <div className="container-fluid">
<div className="row report-names">
<label>
Selected SSRS Report :
<select id="reports" className="combobox" value={this.state.filePath} onChange={this.onFilePathChanged.bind(this)}>
{this.state.categories.map(function (cat) {
return <optgroup key={cat.name} label={cat.text}>
{cat.reports.map(function (rep) {
return <option key={rep.reportPath} value={'c1ssrs/' + rep.reportPath}>
{rep.reportTitle}
</option>;
})}
</optgroup>;
})}
</select>
</label>
</div>
<wjViewer.ReportViewer filePath={this.state.filePath} serviceUrl="https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report">
</wjViewer.ReportViewer>
</div>;
}
onFilePathChanged(e) {
console.log("onFilePathChanged " + e.target.value);
this.setState({
filePath: e.target.value
});
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Wijmo FlexGrid Column DataMaps</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
body {
margin-bottom: 24px;
}
label {
margin-right: 3px;
}
.container-fluid .wj-viewer {
width: 100%;
display: block;
}
.report-names {
margin: 10px;
}
@media print {
.report-names {
display: none;
}
}
export function getReports() {
return {
selectedReport: {
categoryName: 'AdventureWorks',
reportName: 'Company Sales'
},
categories: [
{
name: 'AdventureWorks',
text: 'Adventure Works',
reports: [
{
reportPath: 'AdventureWorks/Company Sales',
reportName: 'Company Sales',
reportTitle: 'Company Sales'
},
{
reportPath: 'AdventureWorks/Customers Near Stores',
reportName: 'Customers Near Stores',
reportTitle: 'Customers Near Stores'
},
{
reportPath: 'AdventureWorks/Employee Sales Summary Detail',
reportName: 'Employee Sales Summary Detail',
reportTitle: 'Employee Sales Summary Detail'
},
{
reportPath: 'AdventureWorks/Product Catalog',
reportName: 'Product Catalog',
reportTitle: 'Product Catalog'
},
{
reportPath: 'AdventureWorks/Product Line Sales',
reportName: 'Product Line Sales',
reportTitle: 'Product Line Sales'
},
{
reportPath: 'AdventureWorks/Sales by Region',
reportName: 'Sales by Region',
reportTitle: 'Sales by Region'
},
{
reportPath: 'AdventureWorks/Store Contacts',
reportName: 'Store Contacts',
reportTitle: 'Store Contacts'
},
{
reportPath: 'AdventureWorks/Territory Sales Drilldown',
reportName: 'Territory Sales Drilldown',
reportTitle: 'Territory Sales Drilldown'
}
]
}
]
};
}
USA - International
Japan
South
Korea