msyj-admin-local/src/modules/grading/components/GradeAnalysisExport.vue

<template>
  <div class="grade-analysis-export analysis-export-modal">
    <div class="print-box">
      <h1>
        分档详情数据
      </h1>
      <div class="quality-info">
        <p>科目：{{ pageInfo.subjectName }}</p>
        <p>考区：{{ pageInfo.areaName }}</p>
        <p>截止时间：{{ currentTime }}</p>
      </div>
      <div class="print-chart">
        <div class="print-chart-title">详细数值表：</div>
        <table class="export-table">
          <tr>
            <th>科目</th>
            <th>档位</th>
            <th>范围</th>
            <th>数量</th>
            <th>占比</th>
            <th>预设占比</th>
            <th>差值</th>
            <th>累计数量</th>
            <th>累计占比</th>
            <th>调整</th>
          </tr>
          <tr v-for="(item, index) in chartData.levelData" :key="index">
            <td>{{ item.subjectName }}</td>
            <td>{{ item.code }}</td>
            <td>{{ item.minScore }} ~ {{ item.maxScore }}</td>
            <td>{{ item.levelCount }}</td>
            <td>{{ item.levelProp }}%</td>
            <td>{{ item.examLevelProp }}%</td>
            <td>{{ item.diffProp }}%</td>
            <td>{{ item.cumulateCount }}</td>
            <td>{{ item.cumulateProp }}%</td>
            <td>{{ item.adjustmentCount }}</td>
          </tr>
        </table>
      </div>
      <div class="print-chart" v-if="chartData.lineChartData">
        <div class="print-chart-title">档位分布曲线图：</div>
        <div class="print-chart-body">
          <echart-render
            :chart-data="chartData.lineChartData"
            :animation-is-open="false"
            chart-type="line"
            ref="lineChart"
            v-if="!showImg"
          ></echart-render>
          <img src="" ref="lineChartImg" v-show="showImg" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EchartRender from "@/components/EchartRender";
import { download, formatDate } from "@/plugins/utils";
import html2canvas from "html2canvas";

export default {
  name: "grade-analysis-export",
  components: { EchartRender },
  props: {
    chartData: {
      type: Object,
      default() {
        return {};
      }
    },
    pageInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      currentTime: formatDate(),
      showImg: false
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.lineChartImg.src = this.$refs.lineChart.getDataURL({
        backgroundColor: "#fff"
      });

      this.showImg = true;
      this.$nextTick(() => {
        this.toExport();
      });
    });
  },
  methods: {
    async toExport() {
      const canvas = await html2canvas(this.$el.childNodes[0], {
        allowTaint: true
      }).catch(() => {});

      if (!canvas) {
        this.$emit("on-exported", false);
        return;
      }

      let result = true;
      await download({
        type: "post",
        url: `${this.GLOBAL.domain}/api/exportPdf`,
        data: {
          content: [canvas.toDataURL().split(",")[1]]
        },
        fileName: `${this.pageInfo.subjectName}-${this.pageInfo.areaName}-分档详情分析.pdf`
      }).catch(() => {
        result = false;
      });

      this.$emit("on-exported", result);
    }
  }
};
</script>