前端局部

这里论述前端局部导入，导出，生成Excel表格
这里应用的是一个js-xlsx插件，所以这里进行尝试。

装置依赖

yarn add xlsx

我的项目中引入

import * as XLSX from 'xlsx'

导出根本实现

定义导出的根本办法

export default function download(json,fileName){    const type = 'xlsx'//定义导出文件的格局    var tmpDown;//导出的内容    var tmpdata = json[0];    json.unshift({});    var keyMap = []; //获取keys    for (var k in tmpdata) {        keyMap.push(k);        json[0][k] = k;    }    var tmpdata = [];//用来保留转换好的json         json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {        v: v[k],        position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)    }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {        v: v.v    });    var outputPos = Object.keys(tmpdata); //设置区域,比方表格从A1到D10    var tmpWB = {        SheetNames: ['mySheet'], //保留的表题目        Sheets: {            'mySheet': Object.assign({},                tmpdata, //内容                {                    '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域                })        }    };    tmpDown = new Blob([s2ab(XLSX.write(tmpWB,         {bookType: (type == undefined ? 'xlsx':type),bookSST: false, type: 'binary'}//这里的数据是用来定义导出的格局类型        ))], {        type: ""    }); //创立二进制对象写入转换好的字节流    saveAs(tmpDown,fileName);}function saveAs(obj, fileName){//导出性能实现    var tmpa = document.createElement("a");    tmpa.download = fileName || "下载";    tmpa.href = URL.createObjectURL(obj); //绑定a标签    tmpa.click(); //模仿点击实现下载    setTimeout(function () { //延时开释        URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来开释这个object URL    }, 100);}function s2ab(s){ //字符串转字符流    var buf = new ArrayBuffer(s.length);    var view = new Uint8Array(buf);    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;    return buf;}function getCharCol(n){    let temCol = '',    s = '',    m = 0    while (n > 0) {        m = n % 26 + 1        s = String.fromCharCode(m + 64) + s        n = (n - m) / 26    }    return s}

我的项目中应用该办法

//导出exceldownloadExl = () => {    const { results } = this.props //须要导出的json数据    let datas = _.clone(results)//这里为了不影响我的项目的数据的应用 采纳了lodash中的深克隆办法    let json = datas.map(item=> { //将json数据的键名更换成导出时须要的键名        return {            '人员ID' :item.id,            '姓名' : item.name,            '证件类型': this.findIdType(item.idType),//将类型代号转为汉字            '证件号码': item.credentialsId,            '固定电话': item.tel,            '移动电话': item.mobile        }    })    download(json,'人员信息.xlsx')//导出的文件名}

绑定事件

<Button onClick={this.downloadExl}>导出Excel</Button>

这样就实现了Excel的导出

导入Excel性能实现

定义相干的办法

//导入excelonImportExcel = file => {    // 获取上传的文件对象    const { files } = file.target;    // 通过FileReader对象读取文件    const fileReader = new FileReader();    fileReader.onload = event => {        try {            const { result } = event.target;            // 以二进制流形式读取失去整份excel表格对象            const workbook = XLSX.read(result, { type: 'binary' });            // 存储获取到的数据            let data = [];            // 遍历每张工作表进行读取（这里默认只读取第一张表）            for (const sheet in workbook.Sheets) {            // esline-disable-next-line            if (workbook.Sheets.hasOwnProperty(sheet)) {                // 利用 sheet_to_json 办法将 excel 转成 json 数据                data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));                // break; // 如果只取第一张表，就勾销正文这行            }        }        // 最终获取到并且格式化后的 json 数据        const uploadData = data.map(item=> {            return {                id : Number(item['人员ID']),                name : item['姓名'],                idType: this.findIdType(item['证件类型'],'string'),                credentialsId: item['证件号码'],                tel: item['固定电话'],                mobile: item['移动电话']            }        })        console.log(uploadData)//这里失去了后端须要的json数据，调用接口传给后端就行了        message.success('上传胜利！') //这里用了antd中的message组件        } catch (e) {            // 这里能够抛出文件类型谬误不正确的相干提醒            message.error('文件类型不正确！');        }    };    // 以二进制形式关上文件    fileReader.readAsBinaryString(files[0]);}

绑定事件

<Button className={Styles.upload_wrap}>    导入Excel    <input className={Styles.file_uploader} type='file' accept='.xlsx, .xls' onChange={this.onImportExcel} />     //这里对原有的input款式进行了批改，accept 属性定义了上传文件反对的类型，onChange 操作中的 importExcel 办法定义了上传文件时执行的操作。 </Button>

取得事件

这样就实现了前端局部的导入和导出

后端局部

这里论述后端局部的导入和导出，这里用Java做实例。
这里应用百万级并发的POI作为导入和导出

增加maven

        <!-- excel导出工具 -->        <dependency>            <groupId>org.apache.poi</groupId>            <artifactId>poi</artifactId>            <version>3.17</version>        </dependency>

导出Excel

package com.briup.apps.poll.web.controller;import java.io.BufferedOutputStream;import java.io.File;import java.io.IOException;import java.io.OutputStream;import java.util.ArrayList;import java.util.List;import org.apache.poi.hssf.usermodel.HSSFCell;import org.apache.poi.hssf.usermodel.HSSFCellStyle;import org.apache.poi.hssf.usermodel.HSSFFont;import org.apache.poi.hssf.usermodel.HSSFRow;import org.apache.poi.hssf.usermodel.HSSFSheet;import org.apache.poi.hssf.usermodel.HSSFWorkbook;import org.apache.poi.poifs.filesystem.POIFSFileSystem;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.multipart.MultipartFile;import com.briup.apps.poll.bean.Answer;import com.briup.apps.poll.service.IAnswerService;import com.briup.apps.poll.util.MsgResponse;@Controller@RequestMapping("/excel")public class ExcelController extends BaseController{    @Autowired    private IAnswerService answerService;    /***     * 下载Excel     * @throws IOException     */    @GetMapping("download")    public void download() throws IOException{        HSSFWorkbook workbook = new HSSFWorkbook();        //创立一个Excel表单,参数为sheet的名字        HSSFSheet sheet = workbook.createSheet("课调答卷表");        //创立表头        setTitle(workbook, sheet);        List<Answer> answers = answerService.findAll();        //新增数据行，并且设置单元格数据        int rowNum = 1;        for (Answer answer:answers) {            HSSFRow row = sheet.createRow(rowNum);            row.createCell(0).setCellValue(answer.getId());            row.createCell(1).setCellValue(answer.getSelections());            row.createCell(2).setCellValue(answer.getCheckes());            row.createCell(3).setCellValue(answer.getContent());            rowNum++;        }        String fileName = "survey-answer.xlsx";        //清空response          response.reset();          //设置response的Header          response.addHeader("Content-Disposition", "attachment;filename="+ fileName);          OutputStream os = new BufferedOutputStream(response.getOutputStream());          response.setContentType("application/vnd.ms-excel;charset=gb2312");         //将excel写入到输入流中        workbook.write(os);        os.flush();        os.close();    }    /***     * 设置表头     * @param workbook     * @param sheet     */    private void setTitle(HSSFWorkbook workbook, HSSFSheet sheet){        HSSFRow row = sheet.createRow(0);        //设置列宽，setColumnWidth的第二个参数要乘以256，这个参数的单位是1/256个字符宽度        sheet.setColumnWidth(0, 10*256);        sheet.setColumnWidth(1, 20*256);        sheet.setColumnWidth(2, 20*256);        sheet.setColumnWidth(3, 100*256);        //设置为居中加粗        HSSFCellStyle style = workbook.createCellStyle();        HSSFFont font = workbook.createFont();        font.setBold(true);        style.setFont(font);        HSSFCell cell;        cell = row.createCell(0);        cell.setCellValue("序号");        cell.setCellStyle(style);        cell = row.createCell(1);        cell.setCellValue("单选");        cell.setCellStyle(style);        cell = row.createCell(2);        cell.setCellValue("多选");        cell.setCellStyle(style);        cell = row.createCell(3);        cell.setCellValue("简答");        cell.setCellStyle(style);    }}

后果

导入Excel

@PostMapping("upload")    public MsgResponse upload(MultipartFile file) {        if (file==null) {            return error("file不能为空");        }        List<Answer> answers = new ArrayList<>();        try {            HSSFWorkbook workbook = new HSSFWorkbook(new POIFSFileSystem(file.getInputStream()));            //有多少个sheet            int sheets = workbook.getNumberOfSheets();            for (int i = 0; i < sheets; i++) {                HSSFSheet sheet = workbook.getSheetAt(i);                //获取多少行                int rows = sheet.getPhysicalNumberOfRows();                Answer answer = null;                //遍历每一行，留神：第 0 行为题目                for (int j = 1; j < rows; j++) {                    answer = new Answer();                     //取得第 j 行                    HSSFRow row = sheet.getRow(j);                    answer.setSelections(row.getCell(1).getStringCellValue());//单选                    answer.setCheckes(row.getCell(2).getStringCellValue());//多选                    answer.setContent(row.getCell(3).getStringCellValue());//简答                    answers.add(answer);                }            }        } catch (IOException e) {            logger.error(e.getMessage(),e);            return error(e.getMessage());        }        return success(answers);    }

这样在后盾能够获取到Excel的行与列。