pdfjs-dist 预览 PDF

1. npm install pdfjs-dist --save

2. Preview.vue

<template>
  <div class="canvas-container">
    <div class="canvas" :class="scaleCount > 0 ? 'scroolBox' : ''" id="canvas">
      <canvas v-for="page in pages" class="canvasDiv" :id="'the-canvas' + page" :key="page" ref="pdf"></canvas>
    </div>
    <div class="flexBox">
      <img @click="scaleD" class="big" src="@/assets/icon/bigIcon.png" alt="" />
      <br />
      <img v-show="scaleCount === 0" class="small" src="@/assets/icon/smallDisableIcon.png" alt="" />
      <img v-show="scaleCount > 0" @click="scaleX" class="small" src="@/assets/icon/smallIcon.png" alt="" />
    </div>
    <div class="bottom_box">
      <button v-if="time > 0" class="btn-disable">同意并继续（{{ time }}秒）</button>
      <button v-else @click="submit_btn()">
        同意并继续
      </button>
    </div>
  </div>
</template>
<script>
import { _loadFile } from "@/utils/common";
import base64 from "@/assets/json/base64.json";
export default {
  data() {
    return {
      pages: [],
      time: 6,
      timer: null,
      scaleCount: 0,
      scale: 1.1
    };
  },
  mounted() {
    this.initPage();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    initPage() {
      _loadFile.call(this, "data:application/pdf;base64," + base64.url);
      this.timer = setInterval(() => {
        if (this.time === 0) {
          clearInterval(this.timer);
          return;
        }
        this.time--;
      }, 1000);
    },
    scaleD() {
      this.scaleCount++;
      this.$refs.pdf.forEach(item => {
        let widthTemp = item.style.width.split("px")[0];
        let heightTemp = item.style.height.split("px")[0];
        item.style.width = parseInt(widthTemp) * parseFloat(this.scale) + "px";
        item.style.height = parseInt(heightTemp) * parseFloat(this.scale) + "px";
      });
    },
    scaleX() {
      if (this.scaleCount == 0) {
        return;
      }
      this.$refs.pdf.forEach(item => {
        let widthTemp = item.style.width.split("px")[0];
        let heightTemp = item.style.height.split("px")[0];
        item.style.width = parseInt(widthTemp) / parseFloat(this.scale) + "px";
        item.style.height = parseInt(heightTemp) / parseFloat(this.scale) + "px";
      });
      this.scaleCount--;
    },
    submit_btn() {
      console.log("1");
    }
  }
};
</script>
<style lang="less" scoped>
.canvas-container {
  margin: 0 auto;
  iframe {
    width: 100%;
    height: calc(100vh - 4rem);
  }
  .canvas {
    width: 100%;
    height: calc(100vh - 2.8rem);
    overflow-x: hidden;
    overflow-y: auto;
    .canvasDiv {
      border-bottom: 1px solid #ccc;
    }
  }
  .scroolBox {
    overflow-x: auto !important;
    overflow-y: auto !important;
  }
  .flexBox {
    position: fixed;
    right: 0.2rem;
    top: 1.4rem;
    padding: 0.1rem;
    background-color: rgba(244, 244, 244, 0.6);
    border-radius: 0.4rem;
    overflow: hidden;
    .big {
      width: 0.58rem;
    }
    .small {
      width: 0.58rem;
    }
  }
  .bottom_box {
    padding: 0 0.48rem 0 0.48rem;
    height: 1.6rem;
    .note {
      font-size: 0.3rem;
      color: #999;
      word-wrap: break-word;
    }
    .btn-disable {
      opacity: 0.3;
    }
  }
}
</style>

3.@/utils/common.js

import PDFJS from "pdfjs-dist";
import workerSrc from "pdfjs-dist/build/pdf.worker.entry";
PDFJS.workerSrc = workerSrc;
export const _renderPage = function(num) {
  this.pdfDoc.getPage(num).then(page => {
    let canvas = document.getElementById("the-canvas" + num);
    var vp = page.getViewport({ scale: 1 });
    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;
    let viewport = page.getViewport({ scale: window.innerWidth / vp.width });
    canvas.width = viewport.width * ratio;
    canvas.height = viewport.height * ratio;
    canvas.style.width = viewport.width + "px";
    ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
    let renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    page.render(renderContext);
    if (this.pages > num) {
      _renderPage.call(this, num + 1);
    }
  });
};
export const _loadFile = function(url) {
  PDFJS.getDocument(url).promise.then(pdf => {
    this.pdfDoc = pdf;
    this.pages = this.pdfDoc.numPages;
    this.$nextTick(() => {
      _renderPage.call(this, 1);
    });
  });
};