PdfViewer

by Wijmo5_jp

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>PdfViewer</h1>
  <p>PDFビューワー。ComponentOne Web APIのPDFサービスを使用して、PDFファイルを表示します。</p>
  <div id="pdfViewer"></div>
  <div class="tab-panel">
    <div>
      <a>ビューワー</a>
      <div class="property-panel">
        <label>モバイル用レイアウト<input id="thresholdWidth" type="checkbox"></label>
      </div>
    </div>
  </div>

</div>

CSS

#pdfViewer {
  width: 100%;
}

JavaScript

var pdfViewer = new wijmo.viewer.PdfViewer('#pdfViewer', {
  serviceUrl: 'https://demo.grapecity.com/c1/aspnet/c1webapi/4.0.20172.105/api/pdf/',
  filePath: 'PdfRoot/従業員別売上.pdf',
  zoomMode: wijmo.viewer.ZoomMode.PageWidth,
  thresholdWidth: 0
});

new wijmo.nav.TabPanel('.tab-panel', { isAnimated: false });
document.getElementById('thresholdWidth').addEventListener('click', function (e) {
  pdfViewer.thresholdWidth = e.target.checked ? 9999 : 0;
});