frontend/src/components/Report.vue

<style lang="scss" scoped>
.top{
  text-align: right;
  padding: 15px;
}
#print-part{
  width: 1240px;
  margin: 0 auto;
  .page{
    width: 100%;
    height: 1754px;
    background: url("../images/report-math/back.jpg")no-repeat center;
    background-size: cover;
    h1{
      text-align: center;
    }
  }
}
#singleCanvas{
  display: none;
}
</style>
<template>
<div class="report">
  <div class="top">
    <el-button type="primary" plain @click="download">导出PDF</el-button>
  </div>
  <div id="print-part">
    <div class="page">
      <img src="@/images/report-math/start-main.png">
      <p>初中数学学科</p>
      <p>诊断报告</p>
      <p>[Mathematics - Diagnostic Report]</p>
    </div>
    <div class="page">
      <h1>B</h1>
    </div>
    <div class="page">
      <h1>C</h1>
    </div>
    <div class="page">
      <h1>D</h1>
    </div>
    <div class="page">
      <h1>E</h1>
    </div>
    <div class="page">
      <h1>F</h1>
    </div>
    <div class="page">
      <h1>G</h1>
    </div>
    <div class="page">
      <h1>H</h1>
    </div>
    <div class="page">
      <h1>I</h1>
    </div>
    <div class="page">
      <h1>J</h1>
    </div>
    <div class="page">
      <h1>K</h1>
    </div>
    <div class="page">
      <h1>L</h1>
    </div>
    <div class="page">
      <h1>M</h1>
    </div>
    <div class="page">
      <h1>N</h1>
    </div>
    <div class="page">
      <h1>O</h1>
    </div>
    <div class="page">
      <h1>P</h1>
    </div>
  </div>
  <canvas id="singleCanvas" width="1240" height="1754">
  </canvas>
</div>
</template>

<script>
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default {
  name: 'Report',
  components: {
  },
  data () {
      return {
        imgWidth: 595.28,
        imgHeight: 841.89,
        PDF: new JsPDF('p', 'pt', 'a4')
      }
  },
  created() {
    
  },
  mounted(){
  },
  methods: {
    download(){
      this.PDF = new JsPDF('p', 'pt', 'a4');
      html2Canvas(document.getElementById('print-part'), {
          allowTaint: true
      })
      .then(canvas => {
          let ctx = canvas.getContext("2d");
          let singleCanvas = document.getElementById('singleCanvas');
          let singleCtx = singleCanvas.getContext("2d");   

          let contentWidth = singleCanvas.width;
          let contentHeight = singleCanvas.height;

          let pageNum = canvas.height / contentHeight;

          for(let i = 0;i < pageNum; i++){
            let pageImg = ctx.getImageData(0,contentHeight * i,contentWidth,contentHeight * (i + 1));
            singleCtx.putImageData(pageImg,0,0);
            let pageData = singleCanvas.toDataURL('image/jpeg', 1.0);
            this.PDF.addImage(pageData, 'JPEG', 0, 0, this.imgWidth, this.imgHeight);
            if(i + 1 < pageNum){
              this.PDF.addPage();
            }
          }

          this.PDF.save('title' + '.pdf');
      });
    }
  }
}
</script>