【前端使用插件js-export-excel导出excel】

本文详细介绍了如何在前端使用js-export-excel插件将数据导出为Excel文件,包括安装步骤、引入方式和实际操作示例,适合前端开发者快速上手Excel导出功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端使用插件js-export-excel导出excel

(1)先安装js-export-excel插件
npm install js-export-excel --save

(2)引入js-export-excel
import ExportJsonExcel from 'js-export-excel';

(3)开始使用
<template>
    <button @click="exportExcel">导出excel</button>
</template>

<script>
import ExportJsonExcel from 'js-export-excel';
export default {
    name: 'exportExcel',
    components: { 
    },
    data() {
        return {
          tableData:[
            {
                name:'路人甲',
                phone:'123456',
                email:'123@123456.com'
            },
            {
                name:'炮灰乙',
                phone:'123456',
                email:'123@123456.com'
            },
            {
                name:'土匪丙',
                phone:'123456',
                email:'123@123456.com'
            },
            {
                name:'流氓丁',
                phone:'123456',
                email:'123@123456.com'
            }
          ],
          propLabel:{
            name:'姓名',
            phone:'手机号',
            email:'邮箱'
          },
          excelTable:[]
        }
    },
    methods:{
      exportExcel(){
        const option = {};
        this.tableData.forEach(item => {
          let obj = {}
          for(let k in item){
            obj[this.propLabel[k]] = item[k];
          }
          this.excelTable.push(obj)
        })
        option.fileName = '学校学生统计数据'//文件名
        let labelList = []
        for(let k in this.propLabel){
          labelList.push(this.propLabel[k])
        }
        option.datas = [
          {
            sheetData: this.excelTable ,//[{'姓名':'路人甲','phone':'123456','email':'123@123456.com'}]
            sheetName: 'sheet1',
            sheetFilter: labelList ,//表头数据对应的sheetData数据 ['姓名','手机号','邮箱']
            sheetHeader: labelList ,//表头数据 ['姓名','手机号','邮箱']
            columnWidths: ['4','8','8'], // 列宽 1代表20像素
          },
          {
            sheetData: this.tableData,
            sheetName: 'sheet2',
            sheetFilter: Object.keys(this.propLabel) ,//表头数据对应的sheetData数据['name','phone','email']
            sheetHeader: labelList ,//表头数据 ['姓名','手机号','邮箱']
            columnWidths: ['8','8','8'], // 列宽 1代表20像素
          }
        ]
        const toExcel = new ExportJsonExcel(option)
        toExcel.saveExcel()
      }
    }
}

</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值