zoukankan      html  css  js  c++  java
  • react 前端导出Excel

    1.首先下载 js-export-excel

       npm install js-export-excel;

    2.下载 xlsx

       npm install xlsx;

    3.引入

       import * as XLSX from 'xlsx'
       import ExportJsonExcel from 'js-export-excel'
     
    4.定义方法
       
       downloadFileToExcel = () => {
            let option = {};  //option代表的就是excel文件
            option.fileName = 'demo表';  //excel文件名称
            option.datas = [
                {
                    sheetData: this.state.dataTable,  //excel文件中的数据源
                    sheetName: 'demo',  //excel文件中sheet页名称
                    sheetFilter: ['你的名称', '我的名称', '你的编号', '我的方案'],  //excel文件中需显示的列数据
                    sheetHeader:['你的名称', '我的名称', '你的编号', '我的方案']  //excel文件中每列的表头名称
                }
            ]
            let toExcel = new ExportJsonExcel(option);  //生成excel文件
            toExcel.saveExcel();  //下载excel文件
        }
     
    5.调用后台接口获取数据源
       
       axios.post('后台接口地址').then(res=>{
             this.state.dataTable = [];
             data.map(item=>{
                  // 表头一一对应
                  this.state.dataTable.push(
                            {
                                '你的名称':item.YourName,
                                '我的名称':item.MyName, 
                                '你的编号':item.YourNo, 
                                '我的方案':item.MyNo
                            }
                        )
                  })
                 // 调用导出excel方法
                 this.downloadFileToExcel()
       })
     
    这样就完完整整的实现了前端导出excel的方法了
     
     
  • 相关阅读:
    Cordova各个插件使用介绍系列(四)—canvas2ImagePlugin保存二维码到手机本地
    如何实现一个简单的MVVM框架
    2015年总结
    基于setTimeout制作滚动广告板
    (Frontend Newbie)JavaScript基础之函数
    (Frontend Newbie)JavaScript基础之常见数据类型
    (Frontend Newbie)Web三要素(三)
    (Frontend Newbie)Web三要素(二)
    (Frontend Newbie) Web三要素(一)
    (Frontend Newbie)Web简史
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/15726429.html
Copyright © 2011-2022 走看看