fix：[试验管理]填报表单导出

package.json

@@ -50,6 +50,7 @@
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
+    "vue-html2pdf": "^1.8.0",
     "vue-i18n": "7.3.2",
     "vue-pdf": "^4.3.0",
     "vue-router": "3.4.9",

src/views/business/study/comp/tbbd/Xq.vue

@@ -16,47 +16,57 @@
       </div>
       <div class="edit-content ">
         <div class="content">
-          <div>
-            <el-button type="primary" @click="dcqbjcgj">{{ $t('page.business.study.studyFormFill.dcqbjcgj') }}
-            </el-button>
-            <el-button type="primary" @click="dclcjcgj">{{ $t('page.business.study.studyFormFill.dclcjcgj') }}
-            </el-button>
-            <el-button type="primary" @click="dcbjjcgj">{{ $t('page.business.study.studyFormFill.dcbjjcgj') }}
-            </el-button>
-            <el-button type="primary" @click="dcxgjcgj">{{ $t('page.business.study.studyFormFill.dcxgjcgj') }}
-            </el-button>
-            <el-button type="primary" @click="dcbhsjgj">{{ $t('page.business.study.studyFormFill.dcbhsjgj') }}
-            </el-button>
+          <div style=" display: flex; justify-content: center; width: 100%;">
+            <div style="width: 1123px;">
+              <el-button type="primary" @click="dcqbjcgj">{{ $t('page.business.study.studyFormFill.dcqbjcgj') }}
+              </el-button>
+              <el-button type="primary" @click="dclcjcgj">{{ $t('page.business.study.studyFormFill.dclcjcgj') }}
+              </el-button>
+              <el-button type="primary" @click="dcbjjcgj">{{ $t('page.business.study.studyFormFill.dcbjjcgj') }}
+              </el-button>
+              <el-button type="primary" @click="dcxgjcgj">{{ $t('page.business.study.studyFormFill.dcxgjcgj') }}
+              </el-button>
+              <el-button type="primary" @click="dcbhsjgj">{{ $t('page.business.study.studyFormFill.dcbhsjgj') }}
+              </el-button>
+            </div>
           </div>
-          <TemplateTable ref="templateTable" :sn="form.templateSn" :templateData="form" fillType="detail" />
-          <div class="content-title">
-            <div class="line"></div>
-            <div class="subtitle"> {{ $t('page.business.study.studyFormFill.qmxx') }}</div>
-          </div>
-          <div class="pal">
-            <el-table :data="qmxxList" v-loading="loadingQmxx">
-              <el-table-column :label="$t('page.business.study.studyFormFill.qmr')" align="center" prop="qmrMc"
-                width="150px" />
-              <el-table-column :label="$t('page.business.study.studyFormFill.qmyy')" align="center"
-                :prop="$i18n.locale === 'zh_CN' ? 'qmyy' : 'qmyyEn'" width="150px" />
-              <el-table-column :label="$t('page.business.study.studyFormFill.qmsj')" align="center" prop="createTime"
-                width="150px" />
-              <el-table-column :label="$t('page.business.study.studyFormFill.bzyy')" align="center" prop="remark"
-                :show-overflow-tooltip="true" />
-            </el-table>
-          </div>
-          <!-- <div class="pal">
+          <div style=" display: flex; justify-content: center; width: 100%;">
+            <vue-html2pdf :show-layout="false" pdf-content-width="1123px" :float-layout="false"
+              pdf-orientation="landscape" :enable-download="true" :preview-modal="true" ref="html2Pdf">
+              <section slot="pdf-content">
+                <TemplateTable ref="templateTable" :sn="form.templateSn" :templateData="form" fillType="detail" />
+                <div class="content-title">
+                  <div class="line"></div>
+                  <div class="subtitle"> {{ $t('page.business.study.studyFormFill.qmxx') }}</div>
+                </div>
+                <div class="pal">
+                  <el-table :data="qmxxList" v-loading="loadingQmxx">
+                    <el-table-column :label="$t('page.business.study.studyFormFill.qmr')" align="center" prop="qmrMc"
+                      width="150px" />
+                    <el-table-column :label="$t('page.business.study.studyFormFill.qmyy')" align="center"
+                      :prop="$i18n.locale === 'zh_CN' ? 'qmyy' : 'qmyyEn'" width="150px" />
+                    <el-table-column :label="$t('page.business.study.studyFormFill.qmsj')" align="center"
+                      prop="createTime" width="150px" />
+                    <el-table-column :label="$t('page.business.study.studyFormFill.bzyy')" align="center" prop="remark"
+                      :show-overflow-tooltip="true" />
+                  </el-table>
+                </div>
+                <!-- <div class="pal">
             <pagination v-show="totalQmxx > 0" :total="totalQmxx" :page.sync="queryParamsQmxx.pageNum"
               :limit.sync="queryParamsQmxx.pageSize" @pagination="getQmxxList" />
           </div> -->
-          <div class="content-title">
-            <div class="line"></div>
-            <div class="subtitle"> {{ $t('page.business.study.studyFormFill.jcgj') }}</div>
-          </div>
-          <JcgjList ref="jcgjList" @handleQuery="getJjcgjList" :showXg="true" />
-<!-- 
+                <div class="content-title">
+                  <div class="line"></div>
+                  <div class="subtitle"> {{ $t('page.business.study.studyFormFill.jcgj') }}</div>
+                </div>
+                <JcgjList ref="jcgjList" @handleQuery="getJjcgjList" :showXg="true" />
+                <!-- 
           <pagination v-show="jcgjTotal > 0" small layout="prev, pager, next" :total="jcgjTotal"
             @pagination="getJjcgjList" /> -->
+              </section>
+
+            </vue-html2pdf>
+          </div>
         </div>
 
       </div>
@@ -115,10 +125,10 @@ import { studyFormFill_tb, studyFormFill_info, studyFormFill_jcgj, studyFormFill
 import { mapGetters } from 'vuex'
 import JcgjList from "@/views/business/comps/common/JcgjList";
 import TemplateTable from '@/views/business/comps/template/TemplateTable';
-
+import VueHtml2pdf from 'vue-html2pdf'
 export default {
   name: "Xq",
-  components: { JcgjList, TemplateTable },
+  components: { JcgjList, TemplateTable, VueHtml2pdf },
   data() {
     return {
       openApprove: false,
@@ -176,21 +186,20 @@ export default {
   created() {
   },
   methods: {
-
     dcqbjcgj() {
-      alert('todo')
+      this.$refs.html2Pdf.generatePdf()
     },
     dclcjcgj() {
-      alert('todo')
+      this.$refs.html2Pdf.generatePdf()
     },
     dcbjjcgj() {
-      alert('todo')
+      this.$refs.html2Pdf.generatePdf()
     },
     dcxgjcgj() {
-      alert('todo')
+      this.$refs.html2Pdf.generatePdf()
     },
     dcbhsjgj() {
-      alert('todo')
+      this.$refs.html2Pdf.generatePdf()
     },
     getJjcgjList(val) {
       this.$modal.loading()