var reportViewer = new wijmo.viewer.ReportViewer('#reportViewer', { serviceUrl: 'https://demo.grapecity.com/c1/aspnet/c1webapi/4.0.20172.105/api/report/', filePath: 'ReportsRoot/Japanese Reports/複写伝票.flxr', reportName: '納品書01', zoomMode: wijmo.viewer.ZoomMode.PageWidth, thresholdWidth: 0 }); var reports = [ { filePath: 'レポート目次.flxr', reportName: 'レポート目次01' }, { filePath: '価格シール.flxr', reportName: '価格シール01' }, { filePath: '在庫管理.flxr', reportName: '商品管理02' }, { filePath: '社員名簿.flxr', reportName: 'Employees レポート' }, { filePath: '従業員別売上.flxr', reportName: '従業員別売上02' }, { filePath: '商品カタログ.flxr', reportName: '商品カタログ01' }, { filePath: '商品管理シール.flxr', reportName: '商品管理シール01' }, { filePath: '請求書.flxr', reportName: '請求書03' }, { filePath: '売上一覧.flxr', reportName: '売り上げリスト' }, { filePath: '複写伝票.flxr', reportName: '納品書01' }, { filePath: '連続帳票.flxr', reportName: '連続帳票01' } ]; new wijmo.nav.TabPanel('.tab-panel', { isAnimated: false }); new wijmo.input.ComboBox('#reportName', { itemsSource: 'レポート目次,価格シール,在庫管理,社員名簿,従業員別売上,商品カタログ,商品管理シール,請求書,売上一覧,複写伝票,連続帳票'.split(','), selectedIndex: 9, selectedIndexChanged: function(s, e) { reportViewer.filePath = 'ReportsRoot/Japanese Reports/' + reports[s.selectedIndex].filePath; reportViewer.reportName = reports[s.selectedIndex].reportName; } }); document.getElementById('thresholdWidth').addEventListener('click', function (e) { reportViewer.thresholdWidth = e.target.checked ? 9999 : 0; });
<div class="container"> <h1>ReportViewer</h1> <p>帳票ビューワー。ComponentOne Web APIのレポートサービスを使用して、FlexReportまたはSSRSレポートを表示します。</p> <div id="reportViewer"></div> <div class="tab-panel"> <div> <a>ビューワー</a> <div class="property-panel"> <label>レポート<div id="reportName"></div></label> <label>モバイル用レイアウト<input id="thresholdWidth" type="checkbox"></label> </div> </div> </div> </div>