emis-frontend/src/components/PdfViewer/viewer.vue

<template>
  <!-- v-if="pdfUrl" -->
  <div class="pdf-viewer grid2" >
    <div style="position: relative;">
      <div class="pdf-bar">
        <div class="zoom-minus" @click="zoomIn">
          <i class="el-icon-minus" title="缩小"></i>
        </div>
        <div class="scale" >
          <el-input v-model.number="scale" size="mini" @keyup.enter.native="setScaleValue">
            <template slot="append">%</template>
          </el-input>
        </div>
        <div class="zoom-plus" @click="zoomOut">
          <i class="el-icon-plus" title="放大"></i>
        </div>
        <div class="prev" @click="prePage">
          上一页
        </div>
        <div class="page">
          <el-input-number
            v-model.number="currentPage"
            :min="0"
            :max="pageCount"
            size="mini"
          />
        </div>
        <div class="page-count">/ {{ pageCount }}</div>
        <div class="next" @click="nextPage">
          下一页
        </div>
        <div class="tools">
          <div style="width:100%;text-align: right;">
            <el-button title="" type="primary" v-if="isA4" @click="showSinglePage">切换单页</el-button>
            <el-button title="" type="primary" v-else  @click="showA4Page">切换A4</el-button>
            <el-button title="" type="primary" icon="el-icon-download"   @click="downPDF">下载</el-button>
            <el-button title="" type="primary" icon="el-icon-printer"   @click="printPDF">打印</el-button>
          </div>
        </div>
      </div>
      <div style="min-height:1600px;margin: 0 auto;overflow: auto;">
           <!-- <el-scrollbar style="height:800px"> -->
           <!-- </el-scrollbar> -->
          <div class="pdf-wrapper">
                  <pdf
                    :src="currentPdfUrl"  
                    :page="page"
                    @num-pages="thisPageCount = $event"
                    @page-loaded="onPageLoaded($event)"
                    ref="pdf"
                  ></pdf>
                  <!-- v-drag -->
          </div>
       
      </div>
    </div>
  </div>
</template>
<script>
/**
 * vue-pdf最好别用4.2,因为他依赖的pdfjs为2.5，
 * 但他会下载最新的2.16版本，这个版本和原来的2.5结构目录不一样，
 * 一定要使用4.2的话就手动装一下pdfjs-dist的2.5.207 ==> npm i pdfjs-dist@2.5.207
 */
import pdf from 'vue-pdf'
import { jsPDF } from "jspdf";
import PdfUtils from '@/utils/pdfUtils.js';
export default {
  components: { pdf },
  props: {
    pdfList:{
      type: Array,
    },
    startPage: {
      type: Number,
      default: 1
    },
    isInitA4:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      resetCountKey:1,
      loadPdfUrl:null,

      // 单页模式
      cacheFileList:this.pdfList,
      isA4:this.isInitA4,

      page: 1,
      currentPage: 1,
      pageCount: this.pdfList.length,

      // A4 模式
      cacheA4FileList:[],
      thisPageCount:1,


      scale: 20,
      preScale: 20,

      // // A4
      // newPrototype: [],
      // newPrototypeValue: [],
      // imgFiles: [], //pdf页数列表
      // filelist: [], //列表
      // //img
      // realWidth: 720,
      // dpr: '',
      loading: false,

    }
  },
  computed: {
    currentPdfUrl() {
      if (!this.loadPdfUrl) return ''
      const publicPath =
        process.env.NODE_ENV === 'production'
          ? process.env.VUE_APP_ROUTER_BASE
          : '/'
      return pdf.createLoadingTask({
        url: this.loadPdfUrl,
        cMapUrl: `${publicPath}cmaps/`,
        cMapPacked: true
      })
    }
  },
  watch: {
    pdfList(){
      this.cacheFileList=this.pdfList;
      this.pageCount=this.cacheFileList.length;
      if(this.isA4){
        setTimeout( this.showA4Page(),2000);
      }
      // console.log(this.loadPdfUrl);
      // this.showFirstFile();
    },
    thisPageCount(value) {
      // console.log("============11111====================")
      // console.log(this.isA4)

      if(this.isA4){
        // if (value) this.page = 1
        this.doScale(75);
      }else{
        this.doScale(20);
      }
     
    }
  },
  mounted() {
    this.showFirstFile();
    window.addEventListener('mousewheel', this.handleScroll, { passive: false })

  },
  methods: {
    showFirstFile(){
      if(this.isA4){
        // this.isA4=false;
        setTimeout( this.showA4Page(),2000);
       
      }else{
        if(this.cacheFileList&& this.cacheFileList.length>0){
          this.loadPdfUrl =this.pdfList[0].pdfUrl;
          this.resetCountKey++;
        }
      }
    },
    addPdfUrl(billCode,pdfUrl){
      let item={
        "billCode":billCode,
        "pdfUrl":pdfUrl
      }
      this.pdfList.push(item);
    },
    handleScroll(e){
      // 判断是不是按下ctrl键
      if(e.ctrlKey) {
        // 取消浏览器默认的放大缩小网页行为
        e.preventDefault()
        // 判断是向上滚动还是向下滚动
        if (e.deltaY > 0) {
          // 放大重写，业务代码
          this.zoomOut()
        } else {
          // 缩小重写，业务代码
          this.zoomIn()
        }
      }
    },
    
    onPageLoaded(currentPage){
   

      if(this.isA4){
        // this.page = 1;
        // this.doScale(75);
      }else{
        // this.currentPage=1;
        // this.page = 1;
        // this.doScale(20);
      }
    },
    
    doScale(val){
       if (isNaN(val)) {
        this.scale = this.preScale
        return
      }
      if (val< 10) {
        this.scale = 10
      }
      if (val > 200) {
        this.scale = 200
      }
      this.preScale = this.scale
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%';
      this.$refs.pdf.$el.style.margin = "0 auto";
    },
    setScaleValue(e) {
      this.doScale(e.target.value)
    },
    zoomIn() {
      if (this.scale > 20) {
        this.scale += -5
        this.doScale(this.scale );
      }
    },
    zoomOut() {
      if (this.scale < 200) {
        this.scale += 5
        this.doScale(this.scale );
      }
    },
    prePage() {
      console.log('this.pageCount', this.currentPage, this.pageCount)
      if(!this.isA4){
           let fileNo = this.currentPage - 1
           if (fileNo < 1) return
           this.currentPage = fileNo
           this.loadPdfUrl =this.cacheFileList[this.currentPage-1].pdfUrl;
      }
      else{
        let fileNo = this.currentPage - 1
        if (fileNo < 1) return
        this.currentPage = fileNo
        this.loadPdfUrl =this.cacheA4FileList[this.currentPage-1].pdfUrl;
      }
    },
    nextPage() {
      console.log('this.pageCount', this.currentPage, this.pageCount)
      if(!this.isA4){
          let fileNo = this.currentPage + 1
          if (fileNo > this.pageCount) return
          this.currentPage = fileNo
          this.loadPdfUrl =this.cacheFileList[this.currentPage-1].pdfUrl;
      }
      else{
        let fileNo = this.currentPage + 1
          if (fileNo > this.pageCount) return
          this.currentPage = fileNo
          this.loadPdfUrl =this.cacheA4FileList[this.currentPage-1].pdfUrl;
      }
    },
     // 下载
     downPDF() {
          // 下载所有预览的PDF文件
          if(this.isA4){
            if(this.cacheA4FileList&&this.cacheA4FileList.length>0){
              this.cacheA4FileList.forEach(item=>{
                  this.downPdfFile(item.billCode,item.pdfUrl);
              });
            }
          }else{
            if(this.cacheFileList&&this.cacheFileList.length>0){
              this.cacheFileList.forEach(item=>{
                  this.downPdfFile(item.billCode,item.pdfUrl);
              });
            }
          }
      },
      downPdfFile(fileName,pdfUrl){
        var tempLink = document.createElement('a')
          tempLink.style.display = 'none'
          tempLink.href = pdfUrl
          tempLink.setAttribute('download', fileName+'.pdf')
          if (typeof tempLink.download === 'undefined') {
              tempLink.setAttribute('target', '_blank')
          }
          document.body.appendChild(tempLink)
          tempLink.click()
          document.body.removeChild(tempLink)
      },
      // 打印
      printPDF() {
          // this.$refs.pdf.print()
          if(this.isA4){
            if(this.cacheA4FileList&&this.cacheA4FileList.length>0){
              this.cacheA4FileList.forEach(item=>{
                  this.loadPdfUrl=item.pdfUrl;
                  this.$refs.pdf.print();
              });
            }
          }else{
            this.$emit("onPrint");
          }
      },
      // initA4() {
      //   //此功能是为了pdf.js内部，有时候会报for....in的错误，原因是原型方法被其他地方改变，这里需要改回来
      //   for (let key in Array.prototype) {
      //     if (!Array.prototype.hasOwnProperty(key)) continue;
      //     this.newPrototype.push(key);
      //   }
      //   // 存放原始键 原始方法
      //   this.newPrototypeValue = this.newPrototype.map((v) => ({ [v]: Array.prototype[v] }));
      //   // 删除直接属性
      //   this.newPrototype.forEach((v) => delete Array.prototype[v]);

		  // },
      showSinglePage(){
          this.showFirstFile();
          this.isA4 = false;
          this.doScale(20);
          this.resetCountKey++;
      },
      async showA4Page(){
        // this.initA4();
        this.isA4 = true
        this.doScale(75);
        this.cacheA4FileList=[];
        let pdfUtils= new PdfUtils();
        
        let that = this;
        const loadingInstance = this.$loading({
                text: '正在生成A4预览...'
        })

        try {
          let imgFiles = [];
          for(let i=0;i<this.cacheFileList.length;i++){
            let file=this.cacheFileList[i].pdfUrl;
            const img = await pdfUtils.pdfToImg(file);
            imgFiles.push(img);
          }

        // 每4个图片放一页
        if(imgFiles&&imgFiles.length>0){

             // 数组拆分 
            const subImageList=imgFiles.reduce((acc, curr, index) => {
              if (index % 4 === 0) acc.push([])
              acc[Math.floor(index / 4)].push(curr)
              return acc
            }, [])

             // 分页生成文件
            for(let i=0; i<subImageList.length;i++){
                let thisSubList=subImageList[i];
                let pageNo = i+1;
                console.log(thisSubList);
                let pdfUrl=this.mergeImgToPdf(pdfUtils,thisSubList,pageNo);
                if(pdfUrl){
                  let fileItem={
                    "billCode":"page-"+pageNo,
                    "pdfUrl":pdfUrl,
                  }
                  this.cacheA4FileList.push(fileItem);

                  if(i==0){
                    loadingInstance.close();
                    this.loadPdfUrl=this.cacheA4FileList[0].pdfUrl;
                    this.pageCount=1;
                    this.page=1;
                  }
                }
            }
            this.loadPdfUrl=this.cacheA4FileList[0].pdfUrl;
            this.pageCount=this.cacheA4FileList.length;
            this.currentPage=1;
            this.page=1;
            
            this.resetCountKey++;
        }
        // 自行更改要保存的pdf名字
        // doc.save('a4pdf.pdf')
      } catch (error) {
        console.log(error);
      }

    },
    mergeImgToPdf(pdfUtils,imgFiles,pageNo){
      try {
          var doc = new jsPDF('', 'pt', 'a4')
            //  doc.addPage() //添加页
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

            // var imgWidth = 595.28
            // var imgHeight = (592.28 / contentWidth) * contentHeight

            // let imgRealWidth=595.28/2-50;
            let imgRealHeight=841.89/2-50;
            let x=0;
            let y=0;
            for(let i=0;i<imgFiles.length;i++){
              let imgItem=imgFiles[i];

              // 计算宽高比 
              let whRate=imgItem.imgWidth/imgItem.imgHeight;
              
              var contentWidth = imgRealHeight*whRate
              var contentHeight = imgRealHeight;

              // imgRealWidth/whRate

              var imgUrl = imgItem.url;

              let left=40*(x+1)+x*contentWidth;
              let top=40*(y+1)+y*contentHeight;

              // console.log("top:"+top+",left:"+left);
              doc.addImage(imgUrl, 'PNG',left, top, contentWidth, contentHeight)
             
              // 0,0 1,0
              // 0,1 1,1
              // console.log("x:"+x+",y:"+y);
              if(x==0){
                x++;
              }
              else if(x==1){
                x=0;
                y++;
              }
              
              if(y>1){
                x=0;
                y=0;
                // doc.addPage() //添加页
              }
            }
            var pdfBase64 = doc.output('datauristring')
            let pdfUrl=URL.createObjectURL(pdfUtils.base64ToBlob(pdfBase64));
         
            return pdfUrl;
          } catch (error) {
            console.log(error);
            return null;
          }
    }
      
  }
}
</script>
<style lang="scss" scoped>
  .grid1 {
    height: 200px;
    background-image:
      linear-gradient(45deg, #8d8b8b 25%, transparent 0),
      linear-gradient(-45deg, #8d8b8b 25%, transparent 0),
      linear-gradient(45deg, transparent 75%, #8d8b8b 0),
      linear-gradient(-45deg, transparent 75%, #8d8b8b 0);
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
  }

  .grid2 {
  height: 200px;
  background-image: radial-gradient(circle, rgb(165, 165, 165) 1px, #fff 1px);
  background-size: 20px 20px;
  background-position: center center;
}


.grid3 {
  height: 200px;
  background-image:
      linear-gradient(to right, rgb(203 213 225) 1px, transparent 1px),
      linear-gradient(to bottom, rgb(203 213 225) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center center;
}

.grid4 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23fff' /%3E%3Crect x='50%' width='1' height='100%' fill='rgb(203 213 225)' /%3E%3Crect y='50%' width='100%' height='1' fill='rgb(203 213 225)' /%3E%3C/svg%3E%0A");
}

.showA4 {
	position: absolute;
	left: 100%;
	width: 1920px;
  overflow: visible;
}

.pdf-viewer {
  position: relative;
  width: 100%;
  height: 100%;
  // overflow: hidden;
  overflow: auto;
  // height: 100%;
  font-family: PingFang SC;
  // width: 100%;
  // position: relative;
  // background: #eeeeee;
  // background: #dcdcdc;

  .tools {
    display: flex;
    z-index: 9999;
    position: absolute;
    top: 5px;
    right: 30px;
  }
  .pdf-bar {
    position: absolute;
    // position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;

    width: 100%;
    height: 50px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    text-align: center;
    background: #f8f8f8;

    display: flex;
    justify-content: center;
    align-items: center;
    & > div {
      min-width: 36px;
      height: 36px;
      line-height: 36px;
      color: #666;
      cursor: pointer;
      i {
        width: 100%;
        height: 100%;
        color: #666;
        font-weight: bold;
      }
      ::v-deep .el-input--mini {
        input {
          padding: 0 8px;
          width: 50px;
          text-align: center;
        }
        .el-input-group__append {
          padding: 0 6px;
          color: #666;
          cursor: auto;
        }
      }
      ::v-deep .el-input-number {
        margin-left: 10px;
        width: 40px;
        .el-input-number__decrease {
          display: none;
        }
        .el-input-number__increase {
          display: none;
        }
        .el-input--mini {
          input {
            width: 40px;
            text-align: center;
          }
        }
      }
    }
    .prev {
      margin-left: 16px;
    }
    .scale,
    .page {
      display: flex;
      align-items: center;
    }
    .page-count {
      margin-right: 10px;
    }
  }
  .pdf-wrapper {
    position: absolute;
    margin-top: 70px;
    width: 100%;
    height: calc(100% - 70px);
    overflow: auto;
  }
}
</style>