一键导出antD Table(简单)

所需依赖:

1. antdv
   

   $ npm install ant-design-vue@4.x --save

2. ExcelJS


   $ npm install exceljs --save

3. file-saver


   $ npm install file-saver --save

    

demo.vue:

<template>
    <a-table ref='table' :columns='columns' :dataSource='dataSource' />
    <a-button @click="exportExl('文件名', columns, dataSource)">导出</a-button>
</template>

<script>
import { exportExl } from './exportExl.js'
export default {
    name: 'demo',
    data() {
        return {
          columns: [
          {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
          },
          {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
          },
          ],
          dataSource: [
          {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          },
          ],
        }
    },
    methods: {
        exportExl(fileName, columns, dataSource) {
            exportExl(fileName, columns, dataSource)
        }
    }
}
</script>

exportExl.js

// 导出Excel
import * as ExcelJS from 'exceljs'
import saveAs from 'file-saver'
/**
 * antD table 前端导出
 */
export function exportExl(fileName, columns, dataSource) {
    // 创建工作簿
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('Sheet1')

    // 渲染表头
    worksheet.columns = generateHeaders(columns);
    // 改表头颜色
    // handleHeader(worksheet)
    // 渲染数据
    handleDatWithRender(worksheet, columns, dataSource)
    saveWorkbook(workbook, `${fileName}.xlsx`)
}
export function generateHeaders(columns) {
    return columns.map(col => {
        const obi = {
            header: col.title,
            key: col.dataIndex
        }
        return obj
    })
}
export function handleHeader(worksheet) { }
export function handleDatWithRender(worksheet, columns, dataSource) {
    const rowsData = dataSource.map(data => {
        return columns.map(col => {
            return data[col.dataIndex]
        })
    })
    // 添加行
    worksheet.addRows(rowsData)
}
export function saveWorkbook(workbook, fileName) {
    workbook.xlsx.writeBuffer().then(data => {
        const exlBlob = new Blob([data], { type: '' })
        saveAs(exlBlob, fileName)
    })
}

 

参考https://juejin.cn/post/7071882317953761316/