网页加载pdf

下载依赖
npm i pdfjs-dist@2.2.228

<template>
  <div class="center">
    <div class="contor">
    </div>
      <canvas @mousedown="dragAndDrop" @mouseup="cancelEvent" @mouseout="cancelEvent" @mousewheel="enlarge" id="the-canvas" class="canvasstyle" />
    </div>
</template>

<script>
let PDFJS = require('pdfjs-dist');
PDFJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry.js");
export default {
   data() {
    return {
      pdfUrl: "",
      pdfDoc: null, // pdfjs 生成的对象
      pageNum: 1, //
      pageRendering: false,
      pageNumPending: null,
      scale: 1.0, // 放大倍数
      page_num: 0, // 当前页数
      page_count: 0, // 总页数
      maxscale: 2.2, // 最大放大倍数
      minscale: 0.6, // 最小放大倍数
    };
  },
  computed: {
    ctx() {
      const id = document.getElementById("the-canvas");
      return id.getContext("2d");
    }
  },
  methods: {
    dragAndDrop(e){
      let box=document.getElementById("the-canvas");
      let pdfcon=document.getElementById('pdfcon')
      // console.log(document.getElementById('pdfcon'),12121)
      let beforeX=e.offsetX
      let beforeY=e.offsetY
      // box.onmousemove=this.
      var timer = null;
      box.onmousemove=(e)=>{
        if(!timer){
          timer=setTimeout(()=>{
            let x=beforeX-e.offsetX
            let y=beforeY-e.offsetY   
            pdfcon.scrollTop=pdfcon.scrollTop+y
            pdfcon.scrollLeft=pdfcon.scrollLeft+x
            timer=null
          },20)
        }
      }
    },
    cancelEvent(){
      let box=document.getElementById("the-canvas");
      box.onmousemove=null
    },
    enlarge(e){
      //滚轮控制放大缩小
      // if(e.deltaY<0){
      //   this.addscale()
      // }else{
      //   this.minus()
      // }
    },
    onClickLeft() {
      window.history.go(-1);
    },
    init(pdfUrl,num) {
      let _this = this;
      if(num>=1){
        this.pageNum=num
        this.page_num=num
      }else{
        this.pageNum=1
        this.page_num=1
      }
      
      // 初始化pdf
      PDFJS.getDocument(pdfUrl).then(function(pdfDoc_) {
        _this.pdfDoc = pdfDoc_;
        _this.page_count = _this.pdfDoc.numPages;
        
        _this.renderPage(_this.pageNum);
      });
    },
    renderPage(num) {
      this.$emit('getPage',this.pdfDoc.numPages)
      // 渲染pdf
      const vm = this;
      this.pageRendering = true;
      const canvas = document.getElementById("the-canvas");
      // Using promise to fetch the page
      this.pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport(vm.scale);
        // console.log(viewport,'viewport')
        // alert(vm.canvas.height)
        canvas.height = viewport.height;
        vm.pdfWidth = canvas.width = viewport.width;
        // Render PDF page into canvas context
        var renderContext = {
          canvasContext: vm.ctx,
          viewport: viewport
        };
        var renderTask = page.render(renderContext);
        // Wait for rendering to finish
        renderTask.promise.then(function() {
          vm.pageRendering = false;
          if (vm.pageNumPending !== null) {
            // New page rendering is pending
            vm.renderPage(vm.pageNumPending);
            vm.pageNumPending = null;
          }
        });
        // jumpPdf
        
      });
      vm.page_num = vm.pageNum;
    },
    addscale() {
      // 放大
      if (this.scale >= this.maxscale) {
        return;
      }
      // console.log('放大')
      this.scale += 0.1;
      this.queueRenderPage(this.pageNum);
    },
    minus() {
      // 缩小
      if (this.scale <= this.minscale) {
        return;
      }
      // console.log('缩小')
      this.scale -= 0.1;
      this.queueRenderPage(this.pageNum);
    },
    prev() {
      // 上一页
      const vm = this;
      if (vm.pageNum <= 1) {
        return;
      }
      vm.pageNum--;
      vm.queueRenderPage(vm.pageNum);
      this.$emit('changePage',vm.page_num,vm.page_count)
    },
    next() {
      // 下一页
      const vm = this;
      if (vm.pageNum >= vm.page_count) {
        return;
      }
      vm.pageNum++;
      vm.queueRenderPage(vm.pageNum);
      this.$emit('changePage',vm.page_num,vm.page_count)
    },
    queueRenderPage(num) {
      if (this.pageRendering) {
        this.pageNumPending = num;
      } else {
        this.renderPage(num);
      }
    }
  },
  mounted() {
  //解决字体问题
    // let CMAP_URL = "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/cmaps/";
    // let obj = {};
    // // obj.url = 'http://static.cninfo.com.cn/finalpage/2022-06-30/1213877755.PDF'; 
    // // obj.url = 'https://www.gjtool.cn/pdfh5/git.pdf'; 
    // obj.url = ''; 
    // // obj.url = 'adminapi/blogs/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/4%E3%80%81%E7%AC%AC%E5%9B%9B%E9%83%A8%E5%88%86%EF%BC%9A%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80%2814%E9%A2%98%29.pdf';  //pdf文件地址，根据情景自行修改
    // obj.cMapUrl = CMAP_URL;
    // obj.cMapPacked = true;
    // this.init(obj)
  }

}
</script>
<style rel="stylesheet/scss" lang="scss">
.center{
  text-align: center;
}
</style>