#

src/components/pages/components/worksDetail2.vue

@@ -228,12 +228,19 @@
               />
             </div> -->
           </div>
-          <div class="zyBoxC">
+          <div class="zyBoxC" ref="reportPdf">
             <div class="courseTitle" v-if="allWorks.course">
               <div class="txName">
                 <div class="tx"><img :src="tx" alt="" /></div>
                 <div>{{ allWorks.sName }}</div>
                 <div>{{ allWorks.course }}</div>
+                <el-button
+                  type="primary"
+                  size="mini"
+                  style="margin-left: 15px;"
+                  @click="getPdf"
+                  >导出pdf</el-button
+                >
               </div>
 
               <div class="topButton" v-if="tableData.length > 1">
@@ -1582,6 +1589,8 @@ import StudentData from "./studentData";
 import pdf from "./vpdf";
 import htmlDocx from "html-docx-js/dist/html-docx";
 import saveAs from "file-saver";
+import html2canvas from "html2canvas";
+import jspdf from "jspdf";
 export default {
   components: {
     StudentData,
@@ -1851,6 +1860,49 @@ export default {
     });
   },
   methods: {
+    getPdf(){
+      let domHeight = this.$refs.reportPdf.offsetHeight;
+      console.log('this.$refs.reportPdf',this.$refs.reportPdf.offsetHeight);
+      let maxHeight = 64257;
+      html2canvas(this.$refs.reportPdf, {
+        useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
+        scale: (maxHeight/domHeight) > 1 ? 1: (maxHeight/domHeight)
+    }).then((canvas) => {
+        const contentWidth = canvas.width;
+        const contentHeight = canvas.height;
+
+        let pageHeight = contentWidth / 592.28 * 841.89;
+        let leftHeight = contentHeight;
+
+        //页面偏移
+        var position = 0;
+        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+        var imgWidth = 595.28; // A4 宽度
+        var imgHeight = 592.28/contentWidth * contentHeight; // A4总高度
+        var pageData = canvas.toDataURL('image/jpeg', 1.0);
+
+        var pdf = new jspdf('', 'pt', 'a4');
+
+        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+        //当内容未超过pdf一页显示的范围，无需分页
+        // if (leftHeight < pageHeight) {
+            pdf.addImage(pageData, 'JPEG', 10, 0, imgWidth-20, imgHeight );
+        // } else {
+        //     while(leftHeight > 0) {
+        //         pdf.addImage(pageData, 'JPEG', 10, position, imgWidth-20, imgHeight)
+        //         leftHeight -= pageHeight;
+        //         position -= 841.89;
+        //         //避免添加空白页
+        //         if(leftHeight > 0) {
+        //             pdf.addPage();
+        //         }
+        //     }
+        // }
+        pdf.save('js.pdf')
+
+    })
+
+    },
 		changeClass(){//切换班级
 			this.searchWork2();
 			this.getCourseDetail()
@@ -3994,7 +4046,7 @@ export default {
   border-radius: 5px;
   width: 90%;
   box-shadow: 2px 2px 5px #909090;
-  overflow: auto;
+  /* overflow: auto; */
 }
 
 .sd_score .score_box {
@@ -4201,9 +4253,9 @@ export default {
   background: #ededed;
   display: flex;
   align-items: flex-start;
-  justify-content: center;
+  /* justify-content: center; */
   flex-direction: column;
-  height: calc(100% - 50px);
+  min-height: calc(100% - 50px);
 }
 
 .zyBox {
@@ -4550,7 +4602,7 @@ export default {
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: flex-start;
-  height: 253px;
+  /* height: 253px; */
 }
 
 .left_top {
@@ -4571,12 +4623,12 @@ export default {
   align-items: flex-start;
   width: 100%;
   height: calc(100% - 60px);
-  overflow: auto;
+  /* overflow: auto; */
 }
 
 .right_score {
   min-width: 370px;
-  height: 351px;
+  min-height: 351px;
   margin-left: 10px;
 }
 
@@ -4765,9 +4817,9 @@ export default {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-items: flex-start;
+  /* align-items: flex-start; */
   width: 100%;
-  height: 351px;
+  /* height: 351px; */
   margin-bottom: 20px;
 }
 
@@ -4778,7 +4830,7 @@ export default {
   align-items: center;
   width: 100%;
   flex-wrap: nowrap;
-  overflow: auto;
+  /* overflow: auto; */
   /* height: 500px; */
   height: 100%;
 }
@@ -4893,9 +4945,9 @@ export default {
 }
 .radioBox {
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
+  flex-direction: column;
+  flex-wrap: wrap;
+  /* align-items: center; */
 }
 .radioBox > div {
   margin: 10px 0 0 10px;
@@ -4954,7 +5006,7 @@ export default {
 }
 .contentAuto {
   width: 100%;
-  height: 253px;
+  /* height: 253px; */
   overflow: auto;
 }
 .evalCss {