plunkerでpdf.js

概要

plunkerでpdf.jsやってみた。

参考にしたページ

サンプルコード

class MyPdf {
  constructor(canvas, afterRendered) {
    this.canvas = canvas
    this.context = this.canvas.getContext('2d')
    this.pageNumber = 1
    this.rendering = false
    this.afterRendered = afterRendered
  }
  setAfterRendered(afterRendered) {
    this.afterRendered = afterRendered
  }
  loadDocument(path) {
    const renderPdf = (pdf) => {
      this.pdf = pdf
      this.getPage()
    }
    pdfjsLib.getDocument(path).promise.then(renderPdf)
  }
  setPage(pageNumber) {
    if (1 <= pageNumber && pageNumber <= this.pdf.numPages && !this.rendering) 
    {
      this.pageNumber = pageNumber
      this.getPage()
    }
  }
  nextPage() {
    this.setPage(this.pageNumber + 1)
  }
  prevPage() {
    this.setPage(this.pageNumber - 1)
  }
  getPage() {
    if (!this.rendering) 
    {
      this.rendering = true
      this.pdf.getPage(this.pageNumber).then(this.renderPage.bind(this))
    }
  }
  renderPage(page) {
    const viewport = page.getViewport({scale: 1})
    this.canvas.height = viewport.height
    this.canvas.width = viewport.width
    page.render({ canvasContext: this.context, viewport }).promise
      .then(() => {
        if (this.afterRendered) 
        { 
          this.afterRendered(this.pdf.numPages, this.pageNumber) 
        }
        this.rendering = false
      })
  }
}
const myPdf = new MyPdf(document.getElementById('the-canvas'))
myPdf.setAfterRendered((numPages, pageNumber) => {
  document.getElementById('page').innerText = `${pageNumber} / ${numPages}`
})
document.getElementById('next').addEventListener('click', myPdf.nextPage.bind(myPdf))
document.getElementById('prev').addEventListener('click', myPdf.prevPage.bind(myPdf))
myPdf.loadDocument('lib/slides.pdf')

成果物

以上。