print page demo

src/assets/styles/common.scss

@@ -773,3 +773,6 @@
   background: #f5f4f9;
 }
 
+.print-page {
+  page-break-after: always;
+}

src/views/elective/report/components/elective-test-reports.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="fx-column">
-    <index-card v-for="test in testResults" :key="test.key" :title="test.title" class="elective-report-card">
+    <index-card v-for="test in testResults" :key="test.key" :title="test.title" class="elective-report-card print-page">
       <test-report :category="test.key" :source="test.result" readonly></test-report>
     </index-card>
-    <index-card title="选科测评专业" class="mt20">
+    <index-card title="选科测评专业" class="mt20 print-page">
       <test-result :all-test-results="testResults" :selected-majors="summary.selectedList" readonly></test-result>
       <major-match-evaluation></major-match-evaluation>
     </index-card>

src/views/elective/report/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="app-container fx-column fx-sta-cen">
     <div class="elective-report-container">
-      <el-image :src="require('@/assets/images/elective/elective_report_cover.png')"></el-image>
+      <div class="width100 print-page">
+        <el-image :src="require('@/assets/images/elective/elective_report_cover.png')"></el-image>
+      </div>
       <el-divider><h1>选科测评报告</h1></el-divider>
-      <elective-test-reports></elective-test-reports>
+      <elective-test-reports class="print-page"></elective-test-reports>
       <el-divider><h1>选科大数据分析</h1></el-divider>
       <group-subject-query></group-subject-query>
       <el-divider><h1>自选专业</h1></el-divider>