pdfjs实现pdf预览-简单使用

使用的pdfjs版本是"pdfjs-dist": "^2.0.943"

第一步 安装

npm install pdfjs-dist --save

第二步 引入初始化

使用require引入，第一次使用import引入的时候报错了，换成require正常使用

const pdfJS = require("pdfjs-dist");

第三步 使用，完整代码

<template>
    <div>
          <div class="pdf_down">
            <div class="pdf_set_left" @click="scaleD()">放大</div>
            <div class="pdf_set_middle" @click="scaleX()">缩小</div>
          </div>

          <div :style="{width:pdf_div_width,margin:'0 auto'}">
            <canvas v-for="page in pdf_pages" :id="'the-canvas'+page" :key="page"></canvas>
          </div>
    </div>

</template>

<script>
import {FL037} from "api/FL"

const pdfJS = require("pdfjs-dist");
export default {
  data() {
    return {
      navTitle: '兴奋剂试题',
      pdf_scale: 1,//pdf放大系数
      pdf_pages: [],
      pdf_div_width: '',
      pdf_src: null,
      id: '',
      pdfDoc: null,
      screenWidth: '',//视口宽度
      showLoading: true,
    }
  },
  created() {
    this.id = this.$route.query.id
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
    this.get_pdfurl()
  },
  methods: {
    get_pdfurl() {
      //线上请求
      FL037(this.id).then(res => {
        this.data = res.data
        //此处后端返回的是链接，将链接赋值给pdf_src
        this.pdf_src = this.$env.VUE_APP_OSS_URL + this.data.attachments[0].dir
        this._loadFile(this.pdf_src)
      })
    },
    _loadFile(url) {  //初始化pdf
      let loadingTask = pdfJS.getDocument(url)
      loadingTask.promise
        .then((pdf) => {
          this.pdfDoc = pdf
          this.pdf_pages = this.pdfDoc.numPages
          this.$nextTick(() => {
            this._renderPage(1)
          })
        })
    },
    _renderPage(num) {  //渲染pdf页
      const that = this
      this.pdfDoc.getPage(num)
        .then((page) => {
          let canvas = document.getElementById('the-canvas' + num)
          let ctx = canvas.getContext('2d')
          let dpr = window.devicePixelRatio || 1
          let bsr = ctx.webkitBackingStorePixelRatio ||
            ctx.mozBackingStorePixelRatio ||
            ctx.msBackingStorePixelRatio ||
            ctx.oBackingStorePixelRatio ||
            ctx.backingStorePixelRatio || 1
          let ratio = dpr / bsr
          const scale = this.pdf_scale
          const viewport = page.getViewport(scale);
          canvas.width = viewport.width * ratio
          canvas.height = viewport.height * ratio
          //等比缩放  viewport.width是pdf的宽度，*(视口宽度/pdf宽度)，将pdf缩放适应屏幕
          const scaleRate = this.screenWidth / viewport.width
          canvas.style.width = viewport.width * scaleRate + 'px'
          canvas.style.height = viewport.height * scaleRate + 'px'
          that.pdf_div_width = viewport.width * scaleRate + 'px'
          // canvas.style.width = viewport.width + 'px'
          // that.pdf_div_width = viewport.width + 'px'
          // canvas.style.height = viewport.height + 'px'

          ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
          let renderContext = {
            canvasContext: ctx,
            viewport: viewport
          }
          page.render(renderContext)
          if (this.pdf_pages > num) {
            this._renderPage(num + 1)
          }
        })
    },
  }
}
</script>