数据下载

package.json

@@ -17,6 +17,7 @@
     "core-js": "^3.8.3",
     "echarts": "^5.4.3",
     "element-resize-detector": "^1.2.4",
+    "file-saver": "^2.0.5",
     "fs": "0.0.1-security",
     "js-base64": "^3.7.4",
     "lodash": "^4.17.21",
@@ -33,7 +34,8 @@
     "vuex": "^3.6.2",
     "webpack-bundle-analyzer": "^4.10.1",
     "whatwg-fetch": "^3.6.20",
-    "write-file-webpack-plugin": "^4.5.1"
+    "write-file-webpack-plugin": "^4.5.1",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@babel/core": "^7.24.6",

src/views/home/dataChartEditChat.vue

@@ -71,7 +71,7 @@
                   {{ item.content.sql }}
                 </div>
                 <div class="mt-3" v-if="item.content.query_result && item.content.query_result.columns.length">
-                  <div>
+                  <div class="text-right">
                     <v-menu
                       v-model="item.showMenu"
                       :close-on-content-click="false"
@@ -85,10 +85,10 @@
                           v-bind="attrs"
                           text
                           color="primary"
-                        >我要画图</v-btn>
+                        >数据作图</v-btn>
                       </template>
                       <div class="white">
-                        <v-banner>画图配置</v-banner>
+                        <v-banner>作图配置</v-banner>
                         <div class="pa-3">
                           <v-autocomplete
                             v-model="item.model.typeAxis"
@@ -119,6 +119,12 @@
                         </div>
                       </div>
                     </v-menu>
+                    <v-btn
+                      text
+                      color="primary"
+                      :loading="exportLoading"
+                      @click="onExport(item.content.query_result)"
+                    >数据下载</v-btn>
                   </div>
                   <v-card flat outlined height="324">
                     <div class="pa-3">
@@ -237,6 +243,8 @@ import {
   // getAskThroughReact,
   addFeedback
 } from '@/api/dataChart'
+import * as XLSX from 'xlsx'
+import { saveAs } from 'file-saver'
 import { mapGetters } from 'vuex'
 export default {
   name: 'dataChartEditChat',
@@ -252,6 +260,7 @@ export default {
       //   { text: '聊天模式', value: 'chat_direct' },
       //   { text: '数据库模式', value: 'database_direct' }
       // ],
+      exportLoading: false,
       loading: false,
       disabled: false,
       question: '',
@@ -487,6 +496,38 @@ export default {
           content: e.content
         }
       }))
+    },
+    onExport ({ columns, rows }) {
+      const sheetName = 'Sheet1'
+      const fileName = '数据下载'
+      this.exportLoading = true
+      try {
+        // 准备Excel数据
+        const excelData = [columns]
+
+        // 添加数据行
+        rows.forEach(item => {
+          const row = columns.map(header => item[header])
+          excelData.push(row)
+        })
+
+        // 创建工作簿
+        const ws = XLSX.utils.aoa_to_sheet(excelData)
+        const wb = XLSX.utils.book_new()
+        XLSX.utils.book_append_sheet(wb, ws, sheetName)
+
+        // 生成Excel文件并下载
+        const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
+        const blob = new Blob([excelBuffer], {
+          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        })
+        saveAs(blob, `${fileName}.xlsx`)
+      } catch (error) {
+        console.log(error)
+        this.$snackbar.error('Excel导出失败')
+      } finally {
+        this.exportLoading = false
+      }
     }
   }
 }