react學習之js-xlsx導入和導出excel表格

前記：最近真的挺忙的，一件事接着一件，都忘了個人React項目，儘管這是一個沒寫機率沒寫離散的夜晚，我決定仍是先作作個人React
好了，進入正題

項目需求，須要導入和導出表單，發現前端已經強大到無所不能（惋惜我有點懶，學的並不勤快）
所以使用到js-xlsx，附上github地址:https://github.com/SheetJS/js-xlsx

導入表單

1.控制檯安裝

$ npm install xlsx

2.在js文件中引入

import XLSX from 'xlsx';

import ExcelUtil from '../../utils/excelUtil';        //注：excelUtil.js是我自定義的關於表單的操做模塊

3.函數聲明

function importExcel(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) {
                if (workbook.Sheets.hasOwnProperty(sheet)) {
                    // 利用 sheet_to_json 方法將 excel 轉成 json 數據
                    data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    // break; // 若是隻取第一張表，就取消註釋這行
                }
            }
            console.log(data);
        } catch (e) {
            // 這裏能夠拋出文件類型錯誤不正確的相關提示
            console.log('文件類型不正確');
            return;
        }
    };
    // 以二進制方式打開文件
    fileReader.readAsBinaryString(files[0]);

}

4.使用

<input type='file' accept='.xlsx, .xls' onChange={(e)=>{ExcelUtil.importExcel(e)} }/>

5.結果


控制檯打印出結果：

導出表單

第一第二步同上

3.函數聲明

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);
}

4.定義表頭和數據項

const initColumn = [{
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        className: 'text-monospace',
    }, {
        title: '年級',
        dataIndex: 'grade',
        key: 'grade',
    }, {
        title: '部門',
        dataIndex: 'department',
        key: 'department',
    }];


let attendanceInfoList = [
    {
        name:"張三",
        grade:"2017級",
        department:"前端部門"

    },
    {
        name:"李四",
        grade:"2017級",
        department:"程序部門"

    }];

5.使用

<button type="primary" onClick={() => {ExcelUtil.exportExcel(initColumn, attendanceInfoList,"人員名單.xlsx")}}>導出</button>

6.結果

完整代碼

//excelUtil.js
import XLSX from 'xlsx';
import React,{useState,useEffect} from 'react';
function importExcel(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) {
                if (workbook.Sheets.hasOwnProperty(sheet)) {
                    // 利用 sheet_to_json 方法將 excel 轉成 json 數據
                    data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    // break; // 若是隻取第一張表，就取消註釋這行
                }
            }
            console.log(data);
        } catch (e) {
            // 這裏能夠拋出文件類型錯誤不正確的相關提示
            console.log('文件類型不正確');
            return;
        }
    };
    // 以二進制方式打開文件
    fileReader.readAsBinaryString(files[0]);

}
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 {importExcel,exportExcel};