feat: chat export pdf (#3931)

Co-authored-by: wangdan-fit2cloud <[email protected]>

Author: shaohuzhang1

ui/package.json

@@ -32,6 +32,8 @@
     "element-plus": "^2.10.2",
     "file-saver": "^2.0.5",
     "highlight.js": "^11.11.1",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^3.0.1",
     "katex": "^0.16.10",
     "marked": "^12.0.2",
     "md-editor-v3": "^5.8.2",

ui/src/assets/logo/logo.png

@@ -26,7 +26,7 @@
     </div>
     <template v-if="!(isUserInput || isAPIInput) || !firsUserInput || type === 'log'">
       <el-scrollbar ref="scrollDiv" @scroll="handleScrollTop">
-        <div ref="dialogScrollbar" class="ai-chat__content p-16">
+        <div ref="dialogScrollbar" class="ai-chat__content p-16" id="chatListId">
           <PrologueContent
             :type="type"
             :application="applicationDetails"

ui/src/assets/logo/logo.svg

@@ -32,7 +32,7 @@
       d="M166.8344,48.8968H65.6064A33.7544,33.7544,0,0,0,31.89,82.6131v57.07A33.7548,33.7548,0,0,0,65.6064,173.4h101.228a33.7549,33.7549,0,0,0,33.7168-33.7168v-57.07A33.7545,33.7545,0,0,0,166.8344,48.8968Zm2.831,90.4457a6.0733,6.0733,0,0,1-6.0732,6.0733H114.2168a43.5922,43.5922,0,0,0-21.3313,5.5757l-16.5647,9.2946v-14.87h-7.472a6.0733,6.0733,0,0,1-6.0733-6.0733v-60.5a6.0733,6.0733,0,0,1,6.0733-6.0733h94.7434a6.0733,6.0733,0,0,1,6.0732,6.0733Z"
     />
   </svg>
-  <img v-else src="@/assets/logo/logo.svg" :height="height" />
+  <img v-else src="@/assets/logo/logo.png" :height="height" />
 </template>
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'

ui/src/components/ai-chat/index.vue

@@ -0,0 +1,56 @@
+import html2Canvas from 'html2canvas'
+import jsPDF from 'jspdf'
+
+export const exportToPDF = async (elementId: string, filename = 'document.pdf') => {
+  const element = document.getElementById(elementId)
+  if (!element) return
+  await html2Canvas(element, {
+    useCORS: true,
+    allowTaint: true,
+    logging: false,
+    scale: 2,
+    backgroundColor: '#fff',
+  }).then((canvas: any) => {
+    const pdf = new jsPDF('p', 'mm', 'a4')
+    const pageWidth = 190 // 保留边距后的有效宽度
+    const pageHeight = 277 // 保留边距后的有效高度 //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
+    const imgHeight = (pageHeight * canvas.width) / pageWidth
+
+    let renderedHeight = 0
+    while (renderedHeight < canvas.height) {
+      const pageCanvas = document.createElement('canvas')
+      pageCanvas.width = canvas.width
+      pageCanvas.height = Math.min(imgHeight, canvas.height - renderedHeight)
+
+      pageCanvas
+        .getContext('2d')!
+        .putImageData(
+          canvas
+            .getContext('2d')!
+            .getImageData(
+              0,
+              renderedHeight,
+              canvas.width,
+              Math.min(imgHeight, canvas.height - renderedHeight),
+            ),
+          0,
+          0,
+        )
+
+      pdf.addImage(
+        pageCanvas.toDataURL('image/jpeg', 1.0),
+        'JPEG',
+        10,
+        10, // 左边距和上边距
+        pageWidth,
+        Math.min(pageHeight, (pageWidth * pageCanvas.height) / pageCanvas.width),
+      )
+
+      renderedHeight += imgHeight
+      if (renderedHeight < canvas.height) {
+        pdf.addPage()
+      }
+    }
+    pdf.save(filename)
+  })
+}

ui/src/components/logo/LogoIcon.vue

@@ -139,6 +139,9 @@
                     <el-dropdown-item @click="exportHTML"
                       >{{ $t('common.export') }} HTML</el-dropdown-item
                     >
+                    <el-dropdown-item @click="exportToPDF('chatListId', currentChatName + '.pdf')"
+                      >{{ $t('common.export') }} PDF</el-dropdown-item
+                    >
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>
@@ -222,7 +225,6 @@ import { ref, onMounted, nextTick, computed, watch } from 'vue'
 import { marked } from 'marked'
 import { saveAs } from 'file-saver'
 import chatAPI from '@/api/chat/chat'
-
 import useStore from '@/stores'
 import useResize from '@/layout/hooks/useResize'
 import { hexToRgba } from '@/utils/theme'
@@ -236,6 +238,7 @@ import ParagraphDocumentContent from '@/components/ai-chat/component/knowledge-s
 import HistoryPanel from '@/views/chat/component/HistoryPanel.vue'
 import { cloneDeep } from 'lodash'
 import { getFileUrl } from '@/utils/common'
+import { exportToPDF } from '@/utils/htmlToPdf'
 useResize()
 
 const { common, chatUser } = useStore()