web-dev-qa-db-ja.com

ReactjsでExcelファイルを読み取る

ReactjsでExcelファイルを読み込もうとしているときに、頭を叩いています。

Sheetjs 、 Excel-parser 、 exceljs など（8-9など）ライブラリなど、複数のライブラリを試しました。

すべてのライブラリで奇妙で異なるエラーが発生しています。

たとえば、私は Excel-parser を使用しており、次のエラーを取得しています

Module not found: 'child_process'

これは、ノードモジュールであり、ブラウザーでは機能しないためです。

ブラウザーでreactjsと連携できる優れた簡単なライブラリーを知っている人はいますか？

javascriptjqueryexcelreactjs
9
Noman Ali

Sheetjsのnpmバージョンxlsxを使用して、Excelファイルを正常に読み取りました。

コードは次のとおりです。

import * as XLSX from 'xlsx';
//f = file
var name = f.name;
const reader = new FileReader();
reader.onload = (evt) => { \\evt = on_file_select event
    /* Parse data */
    const bstr = evt.target.result;
    const wb = XLSX.read(bstr, {type:'binary'});
    /* Get first worksheet */
    const wsname = wb.SheetNames[0];
    const ws = wb.Sheets[wsname];
    /* Convert array of arrays */
    const data = XLSX.utils.sheet_to_csv(ws, {header:1});
    /* Update state */
    console.log("Data>>>"+data);
};
reader.readAsBinaryString(f);
11
Noman Ali

私はxlsxがかなりうまくいくと思います。 xlsxパッケージ

3
itch96

ノーマンアリ！ありがとうございました。
このコードを使用しました

const handleUpload = (e) => {
    e.preventDefault();

    var files = e.target.files, f = files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        var data = e.target.result;
        let readedData = XLSX.read(data, {type: 'binary'});
        const wsname = readedData.SheetNames[0];
        const ws = readedData.Sheets[wsname];

        /* Convert array to json*/
        const dataParse = XLSX.utils.sheet_to_json(ws, {header:1});
        setFileUploaded(dataParse);
    };
    reader.readAsBinaryString(f)
}
1
Янов Алексей