JavaScript

トップ > チップス > JavaScript

HTML canvas上でPDFスライドショー

3秒ごとにPDFをページめくりするJavaScriptの例です。pdf.jsの解説はnpm(node.jsのパッケージマネージャ)が前提のものが多いようですが、npmを使わずにバイナリビルド(下記URL)から直接構築してみました。

ビルド中で利用したのは以下のファイルとディレクトリです。campsは日本語を表示する際に必要です。

pdf.js
pdf.worker.js
cmaps/


HTMLのコードは以下のようになります。canvasのサイズはPDFに合わせて拡張しています。

<canvas id="the-canvas" style="border:1px solid black" height="300" width="300"></canvas>
<script>
var url = 'foo.pdf';

PDFJS.workerSrc = "pdf.worker.js";
PDFJS.cMapUrl = "cmaps/";
PDFJS.cMapPacked = true;

var current_page = 0;
var current_pdf = null;
var number_of_pages = 0;
var timeout = 3000;

function render_next(){
  current_pdf.getPage(current_page).then(function getPageHelloWorld(page) {
    var scale = 1.0;
    var viewport = page.getViewport(scale);

    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);

    if(current_page < number_of_pages){
      current_page += 1;
      setTimeout(render_next,timeout);
    }
  });
}

PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
  number_of_pages = pdf.numPages;
  current_pdf = pdf;
  current_page = 1;
  render_next();
});
</script>


参考URL

• タグ別一覧: [js] [html]
• チップス一覧