PDFJS使用

先安装pdfjs-dist ，npm install pdfjs-dist -S

 1，封装代码，pdf.js文件：

import PDFJS from 'pdfjs-dist'
/*
    el:'装载PDF的容器'，
    fileSrc:'文件地址'，
    scale:'缩放倍数'
*/
export async function loadPdf({el,fileSrc,scale=2}) {
    let pdfCol = document.querySelector(el)
    let pdf = await PDFJS.getDocument(fileSrc)
    let pages = pdf.numPages
     for (let i = 1; i <= pages; i++) {
      let canvas = document.createElement('canvas') 
      let page = await pdf.getPage(i)
      let viewport = page.getViewport(scale)
      let context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width
      let renderContext = {
          canvasContext: context,
          viewport: viewport
      }
      await page.render(renderContext) 
      canvas.className = 'canvas'
      pdfCol.appendChild(canvas)
     }
}

2，使用

<template>
    <div>
        <div class="pdfCol"></div>
    </div>
</template>

<script>
import { loadPdf } from '@/util/pdf.js'
export default {
  data() {
    return {
        dataHtml:'',
        url:'http://118.89.56.33:8999/pdfh5/default.pdf',
        col:'.pdfCol'
    }
  },
  mounted(){
    loadPdf({
         fileSrc:this.url,
         el:this.col
    })
  }
}
</script>

<style lang="scss">
    .pdfCol{
        width: 900px;
        height: 600px;
        overflow: auto;
        overflow-x: hidden;
        .canvas{
            width: 100%;
        }
    }
</style>

3，效果