Js 导入Excel 表格并解析为 JSON

这篇博客介绍了如何使用XLSX库在JavaScript中实现Excel文件的导入和导出。导入功能通过FileReader读取文件并转化为二进制流,然后使用XLSX库解析成JSON数据。导出功能则将数据和头部信息转换为XLSX格式的worksheet,并创建workbook,最后使用XLSX.writeFile导出文件。这个过程涵盖了数据的读取、转换和格式化,适用于前后端数据交换场景。
摘要由CSDN通过智能技术生成
import XLSX from 'xlsx';

function ImportExcel(files) {
    return new Promise((resolve, reject)=>{
        // 通过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 数据
                // console.log(data);
                resolve(data);
            } catch (e) {
                // 这里可以抛出文件类型错误不正确的相关提示
                console.error(e)
            }
        };
        // 以二进制方式打开文件
        fileReader.readAsBinaryString(files[0]);
    })
}

export default ImportExcel;

导出

import XLSX from 'xlsx';

function exportExcel(headers, data, fileName = '.xlsx') {
    const _headers = headers
        .map((item, i) => Object.assign({}, { key: item.key, title: item.title, position: String.fromCharCode(65 + i) + 1 }))
        .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { key: next.key, v: next.title } }), {});

    const _data = data
        .map((item, i) => headers.map((key, j) => Object.assign({}, { content: item[key.key], position: String.fromCharCode(65 + j) + (i + 2) })))
        // 对刚才的结果进行降维处理(二维数组变成一维数组)
        .reduce((prev, next) => prev.concat(next))
        // 转换成 worksheet 需要的结构
        .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { v: next.content } }), {});

    // 合并 headers 和 data
    const output = Object.assign({}, _headers, _data);
    // 获取所有单元格的位置
    const outputPos = Object.keys(output);
    // 计算出范围 ,["A1",..., "H2"]
    const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`;

    // 构建 workbook 对象
    const wb = {
        SheetNames: ['mySheet'],
        Sheets: {
            mySheet: Object.assign(
                {},
                output,
                {
                    '!ref': ref,
                    '!cols': [{ wpx: 45 }, { wpx: 100 }, { wpx: 200 }, { wpx: 80 }, { wpx: 150 }, { wpx: 100 }, { wpx: 300 }, { wpx: 300 }],
                },
            ),
        },
    };

    // 导出 Excel
    XLSX.writeFile(wb, fileName);
}
export default exportExcel;
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值