fix(接口测试): 修复导出大的测试报告出现空白页问题

api-test/frontend/package.json

@@ -26,6 +26,7 @@
     "fit2cloud-ui": "^1.8.0",
     "html2canvas": "^1.0.0-rc.7",
     "js-base64": "^3.4.4",
+    "js-file-download": "^0.4.12",
     "jsencrypt": "^3.1.0",
     "json-bigint": "^1.0.0",
     "json-schema-faker": "^0.5.0-rcv.32",
@@ -50,6 +51,7 @@
     "pdfjs-dist": "2.5.207",
     "pinia": "^2.0.14",
     "pinia-plugin-persistedstate": "^1.6.3",
+    "print-js": "^1.6.0",
     "sha.js": "^2.4.11",
     "vue": "^2.7.3",
     "vue-calendar-heatmap": "^0.8.4",
@@ -66,8 +68,7 @@
     "vue2-ace-editor": "0.0.15",
     "vuedraggable": "^2.24.3",
     "xml-js": "^1.6.11",
-    "yan-progress": "^1.0.3",
-    "js-file-download": "^0.4.12"
+    "yan-progress": "^1.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

api-test/frontend/src/business/automation/report/ApiReportDetail.vue

@@ -130,6 +130,7 @@ import {
 } from '../../../api/scenario-report';
 import { STEP } from '../../automation/scenario/Setting';
 import MsCodeEdit from 'metersphere-frontend/src/components/MsCodeEdit';
+import print from 'print-js';
 
 export default {
   name: 'MsApiReport',
@@ -708,11 +709,27 @@ export default {
       name = this.encodeSearchKey(name);
       this.$nextTick(() => {
         setTimeout(() => {
-          downloadPDF(document.getElementById('apiTestReport'), name || 'scenario-report');
+          this.printHTML();
           reset();
         }, 5000);
       });
     },
+    printHTML() {
+      function closeFuc() {
+        location.reload();
+      }
+
+      print({
+        printable: 'apiTestReport',
+        type: 'html',
+        maxWidth: 1200,
+        documentTitle: '',
+        scanStyles: true,
+        header: '',
+        targetStyles: ['*'], // 打印内容使用所有HTML样式，没有设置这个属性/值，设置分页打印没有效果
+        onPrintDialogClose: closeFuc,
+      });
+    },
     // 对报告名称中的特殊字符进行编码
     encodeSearchKey(key) {
       const encodeArr = [

api-test/frontend/src/business/automation/report/ApiReportExport.vue

@@ -53,12 +53,12 @@
               {{ request.passAssertions + ' / ' + request.totalAssertions }}
             </api-report-request-header-item>
 
-            <api-report-request-header-item :title="$t('api_report.response_code')" style="width: 300px">
+            <api-report-request-header-item :title="$t('api_report.response_code')" style="width: 200px">
               {{ request.responseResult.responseCode }}
             </api-report-request-header-item>
 
             <api-report-request-header-item :title="$t('api_report.result')" style="width: 50px">
-              <el-tag v-if="request.unexecute">{{ $t('api_test.home_page.detail_card.unexecute') }} </el-tag>
+              <el-tag v-if="request.unexecute">Pending </el-tag>
               <el-tag v-else-if="!request.success && request.status && request.status === 'PENDING'">Pending </el-tag>
               <el-tag v-else-if="request.errorCode" class="ms-test-error_code"> FakeError </el-tag>
               <el-tag size="mini" type="success" v-else-if="request.success"> Success </el-tag>
@@ -122,7 +122,7 @@ export default {
 .scenario-result {
   margin-top: 20px;
   margin-bottom: 20px;
-  min-width: 1200px;
+  min-width: 1000px;
 }
 
 .method {
@@ -158,4 +158,11 @@ export default {
   background-color: #fdf5ea;
   border-color: #fdf5ea;
 }
+
+:deep(.report-left) {
+  float: none;
+}
+:deep(.metric-box-total) {
+  min-width: 100px;
+}
 </style>

framework/sdk-parent/frontend/src/components/report/MsReportTitle.vue

@@ -5,47 +5,38 @@
         <div class="title">
           【{{ type }}】- {{ title }}
           <span v-if="report && (report.endTime || report.createTime)">
-            <span style="margin-left: 10px"
-              >{{ $t("report.test_start_time") }}：</span
-            >
+            <span style="margin-left: 10px">{{ $t("report.test_start_time") }}：</span>
             <span class="time"> {{ report.createTime | datetimeFormat }}</span>
-            <span style="margin-left: 10px"
-              >{{ $t("report.test_end_time") }}：</span
-            >
+            <span style="margin-left: 10px">{{ $t("report.test_end_time") }}：</span>
             <span class="time"> {{ report.endTime | datetimeFormat }}</span>
           </span>
         </div>
       </div>
       <div class="report-right">
-        <img class="logo" src="/assets/logo-MeterSphere.png" />
+        <img class="logo" src="/assets/logo-MeterSphere.png"/>
       </div>
     </el-row>
     <el-row type="flex" style="margin-top: 5px">
       <el-col v-if="this.mode">
-        <div style="float: left">
-          <span> {{ $t("report.run_model") + ":" }} </span>
-        </div>
-        <div style="color: #61c550; margin-left: 10px; float: left">
-          {{ getModeName(this.mode) }}
-        </div>
+        <span> {{ $t("report.run_model") + ":" }} </span>
+        <span style="color: #61c550; ">
+            {{ getModeName(this.mode) }}
+          </span>
       </el-col>
       <el-col v-if="this.poolName">
-        <div style="float: left">
-          <span> {{ $t("load_test.select_resource_pool") + ":" }} </span>
-        </div>
-        <div style="color: #61c550; margin-left: 10px; float: left">
-          {{ this.poolName }}
-        </div>
+        <span> {{ $t("load_test.select_resource_pool") + ":" }} </span>
+        <span style="color: #61c550; ">
+            {{ this.poolName }}
+          </span>
       </el-col>
-      <el-col></el-col>
     </el-row>
-    <el-row v-if="showProjectEnv" type="flex" style="margin-top: 5px">
-      <span> {{ $t("commons.environment") + ":" }} </span>
-      <div
-        v-for="(values, key) in projectEnvMap"
-        :key="key"
-        style="margin-right: 10px"
-      >
+    <el-row v-if="showProjectEnv" style="margin-top: 5px">
+      <el-col>
+        <span> {{ $t("commons.environment") + ":" }} </span>
+        <span
+          v-for="(values, key) in projectEnvMap"
+          :key="key"
+          style="margin-right: 10px">
         {{ key + ":" }}
         <ms-tag
           v-for="(item, index) in values"
@@ -54,7 +45,8 @@
           :content="item"
           style="margin-left: 2px"
         />
-      </div>
+      </span>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -64,7 +56,7 @@ import MsTag from "../MsTag";
 
 export default {
   name: "MsReportTitle",
-  components: { MsTag },
+  components: {MsTag},
   props: {
     title: String,
     type: String,