feat: 实验报告导出为pdf

env.d.ts

 /// <reference types="vite/client" />
+
+declare module 'html2pdf.js'

package.json

@@ -27,7 +27,7 @@
     "dayjs": "^1.11.6",
     "element-plus": "^2.2.21",
     "file-saver": "^2.0.5",
-    "html-to-image": "^1.10.8",
+    "html2pdf.js": "^0.10.1",
     "lodash-es": "^4.17.21",
     "pinia": "^2.0.24",
     "qs": "^6.11.0",

src/modules/student/lab/components/ReportPreview.vue

 <script setup>
 import { getExperimentReport } from '../api'
 
-const props = defineProps({ id: String })
+const props = defineProps({ id: String, makePdf: Boolean })
 const emit = defineEmits(['ready'])
 
 let experiment = $ref()
@@ -121,7 +121,11 @@ function handleClose() {
           </template>
           <!-- 附件 -->
           <template v-if="item.type === 2">
-            <el-table :data="item.files" stripe :header-cell-style="{ background: '#ededed' }" style="margin-top: 20px">
+            <el-table
+              :data="item.files"
+              stripe
+              :header-cell-style="{ background: '#ededed' }"
+              :style="{ 'margin-top': '20px', width: makePdf ? '720px' : '100%' }">
               <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
               <el-table-column label="附件类型" prop="type" align="center">
                 <template #default="{ row }">
@@ -193,6 +197,9 @@ function handleClose() {
   background-color: #efefef;
   border-radius: 6px;
   box-sizing: border-box;
+  :deep(*) {
+    max-width: 100%;
+  }
 }
 .comment {
   width: 100%;

src/modules/student/lab/views/Index.vue

@@ -8,7 +8,7 @@ import { upload } from '@/utils/upload'
 import { getExperiment, getExperimentRecord, uploadExperimentPicture, submitExperimentRecord } from '../api'
 import dayjs from 'dayjs'
 import { saveAs } from 'file-saver'
-import { toBlob } from 'html-to-image'
+import html2pdf from 'html2pdf.js'
 
 const Info = defineAsyncComponent(() => import('../components/Info.vue'))
 const Book = defineAsyncComponent(() => import('../components/Book.vue'))
@@ -183,25 +183,26 @@ function handleReportView() {
 let isExport = $ref(false)
 function handleReportExport() {
   if (!detail) return
-  const fileName = `${detail.student.sno_number}_${detail.student.name}_${detail.experiment.name}_实验报告`
+  const filename = `${detail.student.sno_number}_${detail.student.name}_${detail.experiment.name}_实验报告`
   // 在线报告
   if (experimentInfo?.report_upload_way === 2) {
     console.log('在线报告导出')
     isExport = true
   } else {
-    saveAs(detail.file.url, fileName)
+    saveAs(detail.file.url, filename)
   }
 }
 function handleReportPreviewReady() {
   if (!detail) return
-  const fileName = `${detail.student.sno_number}_${detail.student.name}_${detail.experiment.name}_实验报告`
+  const filename = `${detail.student.sno_number}_${detail.student.name}_${detail.experiment.name}_实验报告`
   const el: HTMLElement | null = document.querySelector('.report-preview__inner')
   if (!el) return
   setTimeout(() => {
-    toBlob(el).then(res => {
-      res && saveAs(res, fileName)
+    html2pdf()
+      .set({ filename, html2canvas: { scale: 2, useCORS: true } })
+      .from(el)
+      .save()
     isExport = false
-    })
   }, 100)
 }
 </script>
@@ -312,7 +313,7 @@ function handleReportPreviewReady() {
 
   <!-- 导出在线报告 -->
   <template v-if="experimentInfo?.id && isExport">
-    <ReportPreview :id="experimentInfo?.id" @ready="handleReportPreviewReady"></ReportPreview>
+    <ReportPreview :id="experimentInfo?.id" makePdf @ready="handleReportPreviewReady"></ReportPreview>
   </template>
 </template>