ReportViewer

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.nav.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.viewer.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<link rel="stylesheet" href="https://demo.grapecity.com/wijmo/sample/styles/sample.css">
<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>

CSS

#reportViewer {
  width: 100%;
}

JavaScript

var reportViewer = new wijmo.viewer.ReportViewer('#reportViewer', {
  serviceUrl: 'http://localhost:29384/api/Report',
  filePath: 'test.flxr',
  reportName: 'Crystal1'
});

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