js-export-excel插件的使用以及封装导出表格

1.安装

npm i js-export-excel

2.使用

以下方法可使用与vue2、vue3、react

①react17中使用

import React from 'react'
import CinemasGetlistAction from '../redux/action/CinemasGetlistAction'
import ExportJsonExcel from 'js-export-excel';
import {connect} from 'react-redux'
function Cinemas(props) {
  const data = [
    {
      key: '1',
      name: '张三',
      isCompeleted: true,
      scored: 80,
      compeleteDate: '2022-12-12 08:00:00'
    },
    {
      key: '2',
      name: '李四',
      isCompeleted: true,
      scored: 90,
      compeleteDate: '2022-12-12 08:00:00'
    },
    {
      key: '3',
      name: '王五',
      isCompeleted: true,
      scored: 100,
      compeleteDate: '2022-12-12 08:00:00'
    },
    {
      key: '4',
      name: '小明',
      isCompeleted: true,
      scored: 70,
      compeleteDate: '2022-12-12 08:00:00'
    },
    {
      key: '5',
      name: '小红',
      isCompeleted: false,
      scored: 80,
      compeleteDate: '2022-12-12 08:00:00'
    },
    {
      key: '6',
      name: '小李',
      isCompeleted: true,
      scored: 50,
      compeleteDate: '2022-12-12 08:00:00'
    },
    {
      key: '7',
      name: '小张',
      isCompeleted: false,
      scored: 80,
      compeleteDate: '2022-12-12 08:00:00'
    },
  ];
  const downloadExcel = () => {   //导出table数据
      const data_ = data ? data : '';//表格数据
      let option = {};
      let dataTable = [];
      if (data) {
        for (let i in data_) {
          if(data_){
            let obj = {
              '姓名': data_[i].name,
              '是否完成': data_[i].isCompeleted,
              '考试得分': data_[i].scored,
              '完成日期': data_[i].compeleteDate
            }
            dataTable.push(obj);
          }
        }
      }
      option.fileName = '二中学生考试情况'
      option.datas = [
        {
          sheetData: dataTable,
          //sheetName: 'sheet',   //可有可无
          //sheetFilter:['姓名', '是否完成', '考试得分', '完成日期'],  //可有可无
          sheetHeader: ['姓名', '是否完成', '考试得分', '完成日期'],  //表头
        }
      ];
      let toExcel = new ExportJsonExcel(option);
      toExcel.saveExcel();
    }
  return (
    <div>
      <button  onClick={downloadExcel}>导出</button>
    </div>
  )
}

const mapStateProps=(state)=>{
  return{
    city:state.Cityreducer.cityName,
    CinemasList:state.CinemasListReducer.CinemasList
  }
}
const mapDispatchProps={
  // store.dispatch(CinemasGetlistAction())
  CinemasGetlistAction

}
export default connect(mapStateProps,mapDispatchProps)(Cinemas)

②Vue3中封装使用

封装 index.js

export function downloadExcel(name,data,header){
    const data_ = data ? data : '';//表格数据
    let option = {};
    let dataTable = [];
    data_.map(item=>{
      for(let i in item){
        if(i === 'key')
          delete item[i]   //删除不需要的键值
      }
      dataTable.push(item);
    })

    option.fileName = name
    option.datas = [
      {
        sheetData: dataTable,
        sheetHeader: header,  //配置表头
        columnWidths:[10,10,10,10]   //列宽
      }
    ];
    let toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
  }

main.js挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//全局方法
import {downloadExcel} from '@/utils/index'

//全局组件
const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')

//挂载全局方法
app.config.globalProperties.$downloadExcel = downloadExcel

api自动导入可查看

在页面中使用

<template>
    <div class="error-page">
         <button @click="download">add</button>
    </div>
</template>

<script setup>
//import {getCurrentInstance} from 'vue'
//这里配置了api自动导入、所以无需在引入
const {proxy} = getCurrentInstance()
  const data = [
    {
      key: '1',
      name: '张三',
      isCompeleted: true,
      scored: 80,
      compeleteDate: '2022-12-12 08:00:00'
    },
    {
      key: '2',
      name: '李四',
      isCompeleted: true,
      scored: 90,
      compeleteDate: '2022-12-12 08:00:00'
    },
    {
      key: '3',
      name: '王五',
      isCompeleted: true,
      scored: 100,
      compeleteDate: '2022-12-12 08:00:00'
    },
    {
      key: '4',
      name: '小明',
      isCompeleted: true,
      scored: 70,
      compeleteDate: '2022-12-12 08:00:00'
    },
    {
      key: '5',
      name: '小红',
      isCompeleted: false,
      scored: 80,
      compeleteDate: '2022-12-12 08:00:00'
    },
    {
      key: '6',
      name: '小李',
      isCompeleted: true,
      scored: 50,
      compeleteDate: '2022-12-12 08:00:00'
    },
    {
      key: '7',
      name: '小张',
      isCompeleted: false,
      scored: 80,
      compeleteDate: '2022-12-12 08:00:00'
    },
  ];
    const download=()=>{
        proxy.$downloadExcel('狂歌',data,['姓名', '是否完成', '考试得分', '完成日期'])
    }
</script>