介紹

SheetJS js-xlsx 是一款能夠讀寫多種格式表格的插件,瀏覽器支持良好,並且能在多個語言平台上使用,目前在github 上有12602 個star,再加上react-input-files讓你一個按鈕簡單上傳檔案。

使用

  1. 安裝依賴

    進入項目文件夾,安裝xlsx與react-input-files

    npm install xlsx
    npm install react-input-files
  2. 在專案中引入
    import XLSX from "xlsx";
    import InputFiles from "react-input-files";
  3. 定義上傳InputFiles

    <InputFiles accept=".xlsx, .xls" onChange={this.onImportExcel}>
        <button className="btn btn-primary">Upload</button>
    </InputFiles>

    accept 屬性定義了上傳文件支持的類型,onChange 操作中的 importExcel 方法定義了上傳文件時執行的操作。

  4. 定義獲取和解析Excel物件的方法

    onImportExcel = files => {
        // 獲取上傳的文件對象
        //const { files } = file.target; // 通過FileReader對象讀取文件
        const fileReader = new FileReader();
        //console.log(fileReader);
        for (let index = 0; index < files.length; index++) {
            fileReader.name = files[index].name;
        }
        fileReader.onload = event => {
            try {
                // 判斷上傳檔案的類型 可接受的附檔名
                const validExts = new Array(".xlsx", ".xls");
                const fileExt = event.target.name;
    
                if (fileExt == null) {
                    throw "檔案為空值";
                }
    
                const fileExtlastof = fileExt.substring(fileExt.lastIndexOf("."));
                if (validExts.indexOf(fileExtlastof) == -1) {
                    throw "檔案類型錯誤,可接受的副檔名有:" + validExts.toString();
                }
    
                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) {
                // 這裡可以拋出文件類型錯誤不正確的相關提示
                alert(e);
                //console.log("文件類型不正確");
                return;
            }
        }; // 以二進制方式打開文件
        fileReader.readAsBinaryString(files[0]);
    };

相關連結:React讀取Excel js-xlsx 插件的使用

您也可能喜歡這些文章

Copyright © 2018 ucamc