vue.jsでpdf表示 - 自分用メモ

nuxtでpdfのスライドショーみたいなものを作った時のメモ。 MozillaのPDF.jsを使用しました。　　

npm install

npm i --save pdf-dist

全体ソース

必要個所のみ記載しています。typescriptです。

  async mounted() {
    const PDFJS = require('pdfjs-dist')
    PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min.js')
    const pdf = await PDFJS.getDocument({
      url: '/storage/test.pdf',
      cMapUrl: '/storage/cmaps/',
      cMapPacked: true
    }).promise

    const numPages = await pdf.numPages

    for (const i of [...Array(numPages).keys()]) {
      const page = await pdf.getPage(i + 1)
      const viewport = page.getViewport({ scale: 1 })
      const canvas = document.createElement('canvas') as InstanceType<typeof HTMLCanvasElement>
      canvas.height = viewport.height
      canvas.width = viewport.width
      canvas.maxWidth = '100%'
      document.getElementById('test').appendChild(canvas)
      await page.render({
        canvasContext: canvas.getContext('2d') as InstanceType<typeof CanvasRenderingContext2D>,viewport
      }).promise
    }
  }

解説

  async mounted() {
    const PDFJS = require('pdfjs-dist')
    PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min.js')
～～
  }

require使ってるのはimportだとtypescriptのany型ダメだよエラーがでてめんどくさかったからです。
「PDFJS.GlobalWorkerOptions.workerSrc」を指定しないと警告でたので指定しました。
「pdfjs-dist/build」配下にはほかにもworkerファイルがあったのですが、どれ指定しても変わらなかったのでminifyされてるものを使用しました。

  async mounted() {
    ～～
    const pdf = await PDFJS.getDocument({
      url: '/storage/test.pdf',
      cMapUrl: '/storage/cmaps/',
      cMapPacked: true
    }).promise
    ～～
  }

「cMapUrl」と「cMapPacked」の指定がないと、pdfの文字が表示されませんでした。「pdfjs-dist/build/cmaps」ディレクトリをブラウザがアクセスできる場所へコピーして、「cMapUrl」にそのパスを設定します。
あと、.promiseしないと怒られます。

  async mounted() {
    ～～
    const numPages = await pdf.numPages

    for (const i of [...Array(numPages).keys()]) {
      const page = await pdf.getPage(i + 1)
      const viewport = page.getViewport({ scale: 1 })
      const canvas = document.createElement('canvas') as InstanceType<typeof HTMLCanvasElement>
      canvas.height = viewport.height
      canvas.width = viewport.width
      canvas.maxWidth = '100%'
      document.getElementById('test').appendChild(canvas)
      await page.render({
        canvasContext: canvas.getContext('2d') as InstanceType<typeof CanvasRenderingContext2D>,viewport
      }).promise
    }
  }