pdfJS的使用

• • 版本是 "pdfjs-dist": "2.5.207",
  • npm i pdfjs-dist

版本是 “pdfjs-dist”: “2.5.207”,

npm i pdfjs-dist

<template>
  <div class="details">
    <div class="home_wrap">
      <div class="pdf_down">
        <div class="pdf_set_left" @click="scaleD()">放大</div>
        <div class="pdf_set_middle" @click="scaleX()">缩小</div>
      </div>
    </div>
  </div>
</template>
<script>
const PDFJS = require("pdfjs-dist");
PDFJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry.js");
export default {
  data() {
    return {
      pdfScale: null, //pdf放大系数
      // pdfScale: 0.6, //pdf放大系数
      pdfPages: [],
      pdf_div_width: "",
      pdfSrc: null,
      initScale: 0,
    };
  },
  components: {},
  methods: {
    scaleD() {
      //放大
      this.initScale = 1;
      let max = 0;
      if (window.screen.width > 375) {
        max = 1.5;
      } else {
        max = 1.2;
      }
      if (this.pdfScale >= max) {
        return;
      }
      this.pdfScale = this.pdfScale + 0.1;
      this.loadFile(this.pdfSrc);
    },
    scaleX() {
      //缩小
      this.initScale = 1;
      let min = 0.3;
      if (this.pdfScale <= min) {
        return;
      }
      this.pdfScale = this.pdfScale - 0.1;
      this.loadFile(this.pdfSrc);
    },
    getPdfurl() {
      //获得pdf教案
      //加载本地
      this.pdfSrc =
        "https://dianyuan-public.oss-cn-shenzhen.aliyuncs.com/static/activity/onsemi/211129/H2PToday2102_design_ONSemi.pdf";
      // this.pdfSrc = 'http://kaoshiftp.book118.com//%E5%B0%8F%E5%AD%A6%E5%88%9D%E4%B8%AD/%E5%88%9D%E4%B8%AD%E6%95%B0%E5%AD%A6/%E6%B5%B7%E6%B7%80%E8%A7%A3%E9%A2%98%E9%A2%98%E5%85%B8-%E5%88%9D%E4%B8%AD%E6%95%B0%E5%AD%A6.pdf'
      this.loadFile(this.pdfSrc);
      return;
      //线上请求
      //  this.$axios.get('')
      //  .then((res)=>{
      //  	this.pdfSrc = res.url
      //  	this.loadFile(this.pdfSrc)
      //  })
    },
    loadFile(url) {
      //初始化pdf
      let loadingTask = PDFJS.getDocument(url);
      loadingTask.promise.then((pdf) => {
        this.pdfDoc = pdf;
        this.pdfPages = this.pdfDoc.numPages;
        //debugger
        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;
        if (this.initScale === 0) {
          let scale =
            document.body.getBoundingClientRect().width / page.view[2];
          this.pdfScale = scale;
        }

        let viewport = page.getViewport({ scale: this.pdfScale });
        canvas.width = viewport.width * ratio;
        canvas.height = viewport.height * ratio;
        canvas.style.width = viewport.width + "px";
        that.pdf_div_width = viewport.width + "px";
        canvas.style.height = viewport.height;
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
        let renderContext = {
          canvasContext: ctx,
          viewport: viewport,
        };
        page.render(renderContext);
        if (this.pdfPages > num) {
          this.renderPage(num + 1);
        }
      });
    },
  },
  mounted() {
    this.getPdfurl();
  },
};
</script>
<style lang="less" scoped>
  .home_wrap {
    width: 100%;
    height: 100%;
    .pdf_down {
      position: fixed;
      display: flex;
      z-index: 20;
      right: 26px;
      bottom: 7%;
      .pdf_set_left {
        width: 30px;
        height: 40px;
        color: #408fff;
        font-size: 11px;
        padding-top: 25px;
        text-align: center;
        margin-right: 5px;
        cursor: pointer;
      }
      .pdf_set_middle {
        width: 30px;
        height: 40px;
        color: #408fff;
        font-size: 11px;
        padding-top: 25px;
        text-align: center;
        margin-right: 5px;
        cursor: pointer;
      }
    }
  }
</style>