封装弹窗使用XLSX处理表格内容后再转为file

需求

上传Excel拿到里面的表格内容，解析出来渲染在弹窗里，选择输入框内容，选择后置灰只可选择一次。设置内容后再设置为file传给后端

思路:

拿到上传内容解析出来，在表头下面新增一行内容，然后拿到内容设置上去

通过使用XLSX可以获取到上传的文件有几个表，然后再拿到数据，直接在第一行下面增加一行，内容为undefined, 页面渲染的时候判断，是内容变成选择框。
选择内容置灰，使用antd的把数据disabled设置为true。每次选择后，遍历处理后的数据，再遍历选择数据，判断一样就置灰
后续再把选择内容变成动态就完事～

XLSX

XLSX的github

npm install --save xlsx

关键代码

上传内容后，拿到内容，遍历处理数据，给每个表的第二行新增undefined

const handleUpload = e => {
    if (e.fileList.length > 0) {
            const file = e.file;
            const reader = new FileReader();
            reader.onload = e => {
                    const contents = e.target.result;
                    const workbook = XLSX.read(contents, { type: 'binary' });
                    let listArr = [];
                    workbook.SheetNames.forEach(sheetName => {
                            const worksheet = workbook.Sheets[sheetName];
                            const data = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
                            let item = [];
                            // 直接获取data[0]有多少个就给data增加多个空内容
                            if (data.length > 0) {
                                    item = Array(data[0].length).fill(undefined);
                            }
                            data.splice(1, 0, item);
                            let obj = { name: sheetName, list: data };
                            listArr.push(obj);
                    });
                    setArr(listArr);
            };

            // 读取指定文件内容
            reader.readAsBinaryString(file);
    }
};

设置file

const handleSetFiel = async()=>{
    const addData = list[1];
    const isAllElementsNotEmpty = (array) => array.every((element) => element !== '' && element !== null && element !== undefined);
    if (!isAllElementsNotEmpty(addData)) {
            return message.error('请选择匹配字段')
    }else{
            // 将undefined的单元格值替换为空字符串，以确保生成的xlsx文件中的所有内容正常显示。
            // 默认第一行第一个内容为空
            const worksheetData = list.map(row => {
                    return row.map(cell => (cell === undefined ? '' : cell));
            });
            const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
            // 下载
            // XLSX.writeFile(workbook, 'converted.xlsx');
            const wbout = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' });
            const file = new Blob([wbout], { type: 'application/octet-stream' });

            const formData = new FormData();
            formData.append('file', file, 'converted.xlsx');
            setCurrent(2)
            //调用接口
            // const response = await fetch('API', { method: 'POST', body: formData });
            setFieldList(field);
            setList([])
            setRadio('')
    }
}

使用这个可以下载看看自己的内容是否处理完成

XLSX.writeFile(workbook, 'converted.xlsx');

注：直接下载的时候发现第一行第一格内容为空。需要将undefined的单元格值替换为空字符串，以确保生成的xlsx文件中的所有内容正常显示。