table data export to excel is consistent with antd-design-vue api

The columns dataSource can be consistent with the table of ant-design-vue

 <Excel :columns="columns" sheetName="发送详情" :dataSource="dataSource" style="float:right">
     <a-button type="link">导出Excel</a-button>
 </Excel>

blob.ts

/* eslint-disable */
export function blobToFile(fileName: string, b: any, isUtf8?: any) {
    
    
  if (isUtf8 === true) {
    
    
    b = '\uFEFF' + b;
  }

  const blob = new Blob([b]);
  if ('download' in document.createElement('a')) {
    
     // 非IE下载
    const a_link = document.createElement('a');
    a_link.download = fileName;
    a_link.style.display = 'none';


    a_link.href = URL.createObjectURL(blob);


    document.body.appendChild(a_link);
    a_link.click();
    URL.revokeObjectURL(a_link.href); // 释放URL 对象
    document.body.removeChild(a_link);
  } else {
    
     // IE10+下载
    (<any>navigator).msSaveBlob(blob, fileName);
  }
}

india.vue

<!--  -->
<template>
  <span @click="handleExport">
    <slot></slot>
  </span>
</template>

<script lang='ts' setup>
import {
    
     reactive, toRefs, ref, onMounted } from 'vue'
import ExcelJS from 'exceljs'
import {
    
     blobToFile } from './blob'
const props: any = defineProps({
    
    
  columns: {
    
    
    type: Array,
    default: () => []
  },
  dataSource: {
    
    
    type: Array,
    default: () => []
  },
  fileName: {
    
    
    type: String
  },
  sheetName: {
    
    
    type: String,
    default: 'sheet1'
  },

})
const {
    
     columns, fileName, sheetName, dataSource } = toRefs(props)
const emits = defineEmits(['writeBufferThen', 'writeBufferCatch'])
function handleExport() {
    
    
  const workbook = new ExcelJS.Workbook();
  workbook.creator = 'MBS';
  workbook.lastModifiedBy = 'MBS';
  workbook.created = new Date();
  workbook.modified = new Date();
  workbook.lastPrinted = new Date();
  // 将工作簿日期设置为 1904 年日期系统
  workbook.properties.date1904 = true;
  workbook.views = [
    {
    
    
      x: 0, y: 0, width: 1200, height: 1200,
      firstSheet: 0, activeTab: 1, visibility: 'visible'
    }
  ]
  const sheet = workbook.addWorksheet(sheetName.value, {
    
     views: [{
    
     state: 'frozen', xSplit: 1, ySplit: 1 }] });
  const keys = {
    
    }
  sheet.columns = columns.value?.map(col => {
    
    
    keys[col.dataIndex] = col
    return {
    
    
      header: col.title,
      key: col.dataIndex,
      width: col.excelWidth || 20
    }
  })
  let rows = []
  dataSource.value.forEach(item => {
    
    
    const obj = {
    
    };
    for (const key in item) {
    
    
      if (keys[key]) {
    
    
        const value = keys[key].value ? keys[key].value(item, item[key]) : item[key];
        obj[key] = value;
      }
    }
    rows.push(obj);
  });
  sheet.addRows(rows)
  workbook.xlsx.writeBuffer()
    .then((res) => {
    
    
      blobToFile(`${
      
      fileName.value || new Date().getTime()}.xlsx`, res)
      emits('writeBufferThen', res)
    })
    .catch(err => {
    
    
      console.log('writeBuffer error', err)
      emits('writeBufferCatch', err)
    })
}

defineExpose({
    
     handleExport })
</script>
<style lang='scss' scoped ></style>