Vue で pdf.js を使用して PDF ファイルストリームのオンラインプレビューを実装する

Vue で pdf.js を使用して PDF ファイルフローのオンラインプレビューを実装する手順は次のとおりです。

1.pdf.jsをインストールする

npm install pdfjs-dist

2. pdf.jsの導入

使用する必要があるコンポーネントで、次のコードを使用して pdf.js を導入します。

import pdfjsLib from 'pdfjs-dist'

3. PDF ファイルストリームをロードする

pdf.jsgetDocument()メソッドを使用して PDF ファイルストリームを読み込みます。ファイルストリームを Blob オブジェクトとしてこのメソッドに渡すことができます。たとえば、axios を使用してサーバーから PDF ファイルストリームを取得できます。

axios.get('/api/pdf', {
    
     responseType: 'blob' })
  .then(response => {
    
    
    const blob = new Blob([response.data], {
    
     type: 'application/pdf' })
    this.loadPdf(blob)
  })

loadPdf()メソッドでは、getDocument()次のメソッドを使用して PDF ファイルを読み込みます。

loadPdf(blob) {
    
    
  pdfjsLib.getDocument({
    
     data: blob }).then(pdf => {
    
    
    this.pdf = pdf
    this.renderPdf()
  })
}

この時点で、pdf ファイルは pdf オブジェクトに読み込まれています。

4.PDFをレンダリングする

pdf.js のレンダラーを使用して PDF ファイルをレンダリングします。getViewport()メソッドを使用して、PDF ページの表示サイズを取得できます。

このメソッドではrenderPdf()、PDF ファイルの各ページを反復処理し、Renderer を使用してレンダリングします。

renderPdf() {
    
    
  this.pdf.getPage(1).then(page => {
    
    
    const canvas = document.createElement('canvas')
    const context = canvas.getContext('2d')
    const viewport = page.getViewport({
    
     scale: 1 })
    canvas.height = viewport.height
    canvas.width = viewport.width
    page.render({
    
     canvasContext: context, viewport })
    this.pdfUrl = canvas.toDataURL('image/jpeg')
  })
}

この時点で、PDF ファイルは画像にレンダリングされました。オンラインプレビューを実現するには、画像の URL を img タグの src 属性にバインドします。

<img v-if="pdfUrl" :src="pdfUrl">

上記は、Vue で pdf.js を使用して PDF ファイルフローをオンラインでプレビューする詳細な手順です。