修改

package.json

@@ -81,6 +81,7 @@
     "jspdf": "^2.3.1",
     "lodash": "^4.17.20",
     "vue": "^2.6.12",
+    "vue-html2pdf": "^1.8.0",
     "vue-i18n": "^8.22.0",
     "vue-loader": "^15.9.3",
     "vue-meta-info": "^0.1.7",

src/i18n/lang/zh.js

@@ -10,8 +10,8 @@ export const shmsLang = {
   },
   status: {
     selectName: 'Program',
-    sexMan: 'Man',
-    sexWoMan: 'WoMan',
+    sexMan: 'Male',
+    sexWoMan: 'Female',
     sexUnknown: 'Unknown',
     proTitle: 'PROFILE',
     mobile: 'Mobile Phone',
@@ -25,7 +25,12 @@ export const shmsLang = {
     Level: 'Degree Level',
     Type: 'Degree Type',
     selectName2: 'Semester',
-    selectName3: 'Course Name'
+    selectName3: 'Course Name',
+    enrolled: 'enrolled',
+    graduate: 'graduate',
+    gap: 'gap',
+    withdraw: 'withdraw',
+    Lose: 'Lose contact'
   },
   score: {
     name: 'Name',

src/main.js

@@ -8,7 +8,6 @@ import './style.scss' // 公共样式
 import MetaInfo from 'vue-meta-info'
 import Element from 'element-ui'
 import i18n from './i18n'
-import htmlToPdf from '@/utils/htmlToPdf.js'
 
 // import createBefore from './components/beforeEnter'
 import BeforeEnter from './utils/beforeEnter'
@@ -21,8 +20,6 @@ Vue.use(MetaInfo)
 
 Vue.use(Element)
 
-Vue.use(htmlToPdf)
-
 /* 设置全局变量 */
 window.G = Vue.prototype.$GLOBAL = {
   VERSION: 'PC-1.0.0'

src/pages/shms/certs/index.vue

 <template>
   <div class="app-card">
     <div class="form-box">
-      <el-select @change="changes" v-model="value" :placeholder="$t('shmsLang.selectHolder')" size="small" clearable>
+      <el-select @change="changes" v-model="value" size="small" clearable>
         <el-option v-for="item in options" :key="item.id" :label="item.english_name" :value="item.id"> </el-option>
       </el-select>
       <div class="down-btn" @click="openPdf">{{ $t('shmsLang.downloadBtn') }}</div>
@@ -54,6 +54,7 @@ export default {
         .getCondition()
         .then(response => {
           this.options = response.data.get_school_info.project_map
+          this.value = response.data.get_school_info.project_map[0].id
         })
         .finally(() => {})
     }

src/pages/shms/score/components/info.vue

@@ -17,7 +17,9 @@
       <div class="td">{{ item.semester }}</div>
       <div class="td">{{ item.project_english_name }}</div>
       <div class="td">{{ item.score }}</div>
-      <div class="td">{{ item.pubdate }}</div>
+      <div class="td">
+        <div v-if="item.pubdate">{{ item.pubdate.substring(0, item.pubdate.indexOf(' ')) }}</div>
+      </div>
     </div>
   </div>
 </template>
@@ -74,6 +76,8 @@ export default {
           {
             name: this.$t('shmsLang.score.date'),
             value: this.data.student_info.pubdate
+              ? this.data.student_info.pubdate.substring(0, this.data.student_info.pubdate.indexOf(' '))
+              : ''
           }
         ]
       ]
@@ -89,10 +93,11 @@ export default {
     padding: 30px 0;
     border-bottom: 1px solid #e8e8e8;
     display: flex;
+    justify-content: space-around;
     .temp {
       display: flex;
       align-items: center;
-      width: 440px;
+      // width: 440px;
       margin-bottom: 12px;
       &:nth-child(3) {
         margin-bottom: 0;

src/pages/shms/score/index.vue

 <template>
   <div class="app-card">
     <scach-form @downPdf="downPdf" @search="search" />
-    <app-info id="pdfDom" :data="data" :program="program"/>
+    <!-- <app-info id="pdfDom" :data="data" :program="program"/> -->
+    <vue-html2pdf
+      :show-layout="false"
+      :float-layout="false"
+      :enable-download="true"
+      :preview-modal="true"
+      :paginate-elements-by-height="1000"
+      filename="file"
+      pdf-content-width="100%"
+      ref="html2Pdf"
+    >
+      <section slot="pdf-content">
+        <app-info :data="data" :program="program" />
+      </section>
+    </vue-html2pdf>
   </div>
 </template>
 <script>
+import VueHtml2pdf from 'vue-html2pdf'
 import scachForm from './components/form.vue'
 import appInfo from './components/info.vue'
 import * as api from '@/api/account.js'
 export default {
-  components: { scachForm, appInfo },
+  components: { scachForm, appInfo, VueHtml2pdf },
   data() {
     return {
       pageData: null,
@@ -27,7 +42,8 @@ export default {
       this.getScore(params.form)
     },
     downPdf() {
-      this.getPdf('#pdfDom')
+      // this.getPdf('#pdfDom')
+      this.$refs.html2Pdf.generatePdf()
     },
     getScore(param) {
       api

src/pages/shms/status/components/profile.vue

@@ -3,7 +3,7 @@
     <div class="profile-title">{{ $t('shmsLang.status.proTitle') }}</div>
     <div class="profile-content">
       <div class="photo">
-        <img :src="info.head_img" />
+        <img :src="info.head_img || 'https://webapp-pub.ezijing.com/project/marywood/mary_banner_nx4.jpg'" />
       </div>
       <div class="info-box" style="margin-right: 20px">
         <div class="name">{{ $i18n.locale == 'zh' ? info.chinese_name : info.english_name }}</div>
@@ -24,15 +24,19 @@
         </div>
         <div class="info-temp m-t17">
           <div class="name w140">{{ $t('shmsLang.status.state') }}</div>
-          <div class="value">{{ currentStatus[info.graduation_status] }}</div>
+          <div class="value">{{ setStatus(info.graduation_status) }}</div>
         </div>
         <div class="info-temp m-t17">
           <div class="name w140">{{ $t('shmsLang.status.added') }}</div>
-          <div class="value">{{ info.created_time }}</div>
+          <div class="value" v-if="info.created_time">
+            {{ info.created_time.substring(0, info.created_time.indexOf(' ')) }}
+          </div>
         </div>
         <div class="info-temp m-t17">
           <div class="name w140">{{ $t('shmsLang.status.graduated') }}</div>
-          <div class="value">{{ info.graduation_time }}</div>
+          <div class="value" v-if="info.graduation_time">
+            {{ info.graduation_time.substring(0, info.graduation_time.indexOf(' ')) }}
+          </div>
         </div>
       </div>
     </div>
@@ -46,15 +50,7 @@ export default {
     }
   },
   data() {
-    return {
-      currentStatus: {
-        1: '在读',
-        2: '毕业',
-        3: '失联',
-        4: '休学',
-        5: '退学'
-      }
-    }
+    return {}
   },
   computed: {
     setSex() {
@@ -70,11 +66,11 @@ export default {
     setStatus() {
       return n => {
         const status = {
-          1: '在读',
-          2: '毕业',
-          3: '失联',
-          4: '休学',
-          5: '退学'
+          1: this.$t('shmsLang.status.enrolled'),
+          2: this.$t('shmsLang.status.graduate'),
+          3: this.$t('shmsLang.status.Lose'),
+          4: this.$t('shmsLang.status.gap'),
+          5: this.$t('shmsLang.status.withdraw')
         }
         return status[n]
       }
@@ -106,6 +102,7 @@ export default {
       width: 100%;
       height: 100%;
       display: block;
+      object-fit: cover;
     }
   }
   .info-box {

src/pages/shms/status/index.vue

@@ -15,20 +15,37 @@
           </el-select>
         </div>
       </div>
-      <div class="btn" @click="getPdf('#pdfDom')">{{ $t('shmsLang.downloadBtn') }}</div>
+      <!-- <div class="btn" @click="getPdf('#pdfDom')">{{ $t('shmsLang.downloadBtn') }}</div> -->
+      <div class="btn" @click="generateReport">{{ $t('shmsLang.downloadBtn') }}</div>
     </div>
-    <div id="pdfDom">
+    <!-- <div>
       <profile :info="info" @changes="changes" />
       <degrees :degreesItem="degreesItem" />
-    </div>
+    </div> -->
+    <vue-html2pdf
+      :show-layout="false"
+      :float-layout="false"
+      :enable-download="true"
+      :preview-modal="true"
+      :paginate-elements-by-height="1000"
+      filename="file"
+      pdf-content-width="100%"
+      ref="html2Pdf"
+    >
+      <section slot="pdf-content">
+        <profile :info="info" @changes="changes" />
+        <degrees :degreesItem="degreesItem" />
+      </section>
+    </vue-html2pdf>
   </div>
 </template>
 <script>
+import VueHtml2pdf from 'vue-html2pdf'
 import profile from './components/profile.vue'
 import degrees from './components/degrees.vue'
 import * as api from '@/api/account.js'
 export default {
-  components: { profile, degrees },
+  components: { profile, degrees, VueHtml2pdf },
   data() {
     return {
       pageData: null,
@@ -44,6 +61,9 @@ export default {
     this.getCondition()
   },
   methods: {
+    generateReport() {
+      this.$refs.html2Pdf.generatePdf()
+    },
     getCondition() {
       api
         .getCondition()

src/utils/htmlToPdf.js

-// 导出页面为PDF格式
-import html2Canvas from 'html2canvas'
-import JsPDF from 'jspdf'
-export default {
-  install (Vue, options) {
-    Vue.prototype.getPdf = function () {
-      var title = this.htmlTitle
-      html2Canvas(document.querySelector('#pdfDom'), {
-        allowTaint: true,
-        useCORS: true
-      }).then(function (canvas) {
-        const contentWidth = canvas.width
-        const contentHeight = canvas.height
-        const pageHeight = contentWidth / 592.28 * 841.89
-        let leftHeight = contentHeight
-        let position = 0
-        const imgWidth = 595.28
-        const imgHeight = 592.28 / contentWidth * contentHeight
-        const pageData = canvas.toDataURL('image/jpeg', 1.0)
-        const PDF = new JsPDF('', 'pt', 'a4')
-        if (leftHeight < pageHeight) {
-          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
-        } else {
-          while (leftHeight > 0) {
-            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
-            leftHeight -= pageHeight
-            position -= 841.89
-            if (leftHeight > 0) {
-              PDF.addPage()
-            }
-          }
-        }
-        PDF.save(title + '.pdf')
-      }
-      )
-    }
-  }
-}