vue-fastapi-admin/vue-fastapi-frontend/src/views/aichat/MdRenderer.vue

<template>
  <template v-for="(item, index) in source" :key="index">
    <div  v-if="item.type === 'table'" style="width: 100%; position: relative">
      <chatTable :data="item.content"></chatTable>
      <el-button style="position: absolute;top: 5px;right: 0;z-index: 1;width:30px;height: 30px" @click="downLoadTable(item.content)">
        <el-icon><Download/></el-icon>
      </el-button>
    </div>
    <div v-else-if="item.type === 'html_image'" style="width: 100%;margin-top: 5px;height: 320px">
      <htmlCharts :is_large="is_large" :index="'chat-iframe-'+chatIndex+'-'+index" :data="item.content"></htmlCharts>
    </div>
    <div v-else-if="item.type === 'G6_ER'" style="width: 100%;height: 300px; overflow: hidden; margin-top: 5px;position: relative">
      <antvg6 :is_large="is_large" :g6Data="item.content" :g6Index="'g6-container-'+chatIndex+'-'+index"></antvg6>
      <el-button style="position: absolute;top: 5px;right: 0;z-index: 1;width:30px;height: 30px" @click="fullscreenG6(item.content)">
        <el-icon><FullScreen/></el-icon>
      </el-button>
    </div>
    <div  v-if="item.type === 'docs'" style="width: 100%;margin-top: 5px">
      <div v-for="doc in item.docs">
        <el-link type="primary" @click="downLoadFile(doc)"  :underline="false">{{ doc.file_name  }}</el-link>
      </div>
    </div>
    <div v-else style="width: 100%;margin-top: 5px">
      <markdown :markdown-string="item.content"></markdown>
    </div>
  </template>
</template>
<script setup>
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import markdown from './markdown.vue'
import antvg6 from './antv-g6.vue'
import chatTable from './chatTable.vue'
import htmlCharts from './htmlCharts.vue'
import {Download, FullScreen} from "@element-plus/icons-vue";
import { ref, watch} from 'vue'
const { proxy } = getCurrentInstance();
const props = defineProps({
  source: Array,
  is_large: Boolean,
  chatIndex: Number,
})

const emit = defineEmits(['fullscreenG6'])
function fullscreenG6(data){
  emit('fullscreenG6',data)
}

function downLoadFile(doc){
    let data = {file:doc.file_name,bucket: doc.bucket,sessionId: doc.session_id}
    proxy.download("/default-api/aichat/file/download", {
      ...data,
    }, doc.file_name);
}

function downLoadTable(data){
  const worksheet = XLSX.utils.json_to_sheet(data);
  // 创建一个新的工作簿并将工作表添加到工作簿中
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  // 生成 Excel 文件并触发下载
  const excelBuffer = XLSX.write(workbook,{bookType:'xlsx',type:'array'});
  const excel = new Blob([excelBuffer], { type: 'application/octet-stream' });
  saveAs(excel, '导出文件.xlsx');
}
</script>
<style lang="scss" scoped>
</style>