前端上傳表格，變成可處理的JSON資料

前言：在對于剛剛入行的前端小夥伴們，對于項目功能我相信肯定有一種心态，背景能處理的資料就都有背景來處理，前端不做任何處理最好，哈哈，

1.前端處理的資料不能持久化，就算是資料持久化也都是依賴h5的新特性，做本地存貯一個是存在浏覽器緩存上面（Session），一種則是通過浏覽器存在電腦的硬碟上面（Local），這對前端處理資料大大的有點難度

2.依賴了接口這樣每次調用接口來處理這個資料，感覺友善了很多，但是後端又不願意了，哈哈

——>

哔哔一大堆， 廢話不多說上代碼

//下載下傳依賴
yarn add xlsx
           

下載下傳好了依賴的插件後，到咱們開始寫代碼的時候，

import { Button, Upload} from 'antd'; // 不知道這是幹啥的就去 antDesign UI官網上面檢視一下這個玩意是啥哈
import { UploadOutlined, PlusOutlined } from '@ant-design/icons';
    <Upload
        fileList={[]}
        accept=".xlsx, .xls" // 我這個隻是上傳了這麼解析 xlsx的表格的，如果是要解析pdf doc的那您就自求多福吧
        beforeUpload={(file, list) => uploadBeforeUpload(file, list)}
    >
     <Button
        style={{ marginTop: 15, marginBottom: 15 }}
         icon={<UploadOutlined />}
     >
        上傳表格
      </Button>
    </Upload>
           

咱們上一步已經把上傳的按鈕功能寫了，但是上傳處理的方法還沒有寫，哈哈哈

const uploadBeforeUpload = (file) => {
        const fileReader = new FileReader();
        // 以二進制方式打開檔案
        fileReader.readAsBinaryString(file);
        fileReader.onload = (event) => {
            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);
        };
    };
           

這裡的data就是你要處理的解析出來的JSON了，不過有一點你要注意，因為你要解析的表格頭部的列是中文的，你可能得轉一下，或者在表格寫的時候按照中文的來渲染資料 👇

const columns = [
        {
            title: '配置設定給司機的數量',
            dataIndex: '配置設定給司機的數量',
            ellipsis: true,
            hideInSearch: true,
            align: 'center',
        },
    ];
            <Table
                style={{ padding: '0 10px 10px 10px', backgroundColor: '#fff' }}
                scroll={{ x: 4500 }}
                dataSource={dataList} // 此處是data
                columns={columns}
            />
           

上面渲染表格，我是以中文的表頭來渲染的，有沒有感覺很low，其實可以在剛取出來data的時候可以手動給他變成英文的名

說到最後希望這篇文章能夠幫助到你，代碼可以抄但是更得了解，多敲才是王道希望你對代碼有着真摯的感情，對自己敲出的代碼都有不一樣的自信，感謝您的浏覽，願你出走半生，歸來仍是少年