使用pdf.js转canvas 实现预览pdf

基于pdf.js实现pdf预览

pdf.js介绍

• 官网（手动狗头）

代码实现

1. 安装pdf.js

	npm i pdfjs-dist

2. vue中使用pdf.js

<template>
  <div class="pdf">
    <canvas v-for="item in pdfDoc.numPages" :key="item" :id="'the-canvas' + item"></canvas>
  </div>
</template>

<script>
/** 
  * 写这篇记录的时候 最新版本为2.7.570 引入时需要使用require引入
  * const pdfjs = require('pdfjs-dist)
  * 在使用时，会报一些undefined之类的错误
  * 所以我改用@2.3.200版本的pdfjs
  */
import pdfjs from 'pdfjs-dist'
export default {
  data() {
    return {
      pdfUrl: 'https://xxxxxxx.pdf',
      pdfDoc: null,
      scale: 0.9
    };
  },
  mounted() {
    this.showPDF()
  },
  methods: {
    showPDF() {
      pdfjs.getDocument(this.pdfUrl).promise.then(pdf => {
        this.pdfDoc = pdf
        for(let i = 0; i < pdf.numPages; i++)
          this.renderPage(i + 1)
      })
        .catch(e => {
          console.error(e, 'err')
        })
    },
    renderPage (num) {
      this.pdfDoc.getPage(num).then(page => {
        var viewport = page.getViewport(this.scale)
        let canvas = document.getElementById('the-canvas' + num)
        canvas.height = viewport.height
        canvas.width = viewport.width
        var renderContext = {
          canvasContext: canvas.getContext('2d'),
          viewport: viewport
        }
        var renderTask = page.render(renderContext)
        renderTask.promise.then(function () {
          // 渲染完成后的操作
        })
      })
    }
  }
}
</script>

ps：此文章做个人平常记录，若是有幸帮到朋友，但求一赞