javascript - วิธีดึงรูปภาพจากไฟล์ excel และแปลงเป็น json?

ฉันมีไฟล์ Excel ที่มีหัวข้อ image และ name ฉันต้องการดึงรูปภาพและแปลงมันเป็น ByteArray และบันทึก image และ name เป็นวัตถุ JSON เช่น: { image: ByteArray, name: string }

ฉันมีฟอร์มดังต่อไปนี้ใน js

<label className="flex items-center gap-3 px-3 py-2 bg-[#1D6F42] text-white text-blue rounded-md cursor-pointer">
    <RiFileExcel2Line size={22} />
    <span className="text-base leading-normal">Upload From Excel</span>
    <input type="file" className="hidden" disabled={formLoading} onChange={(e) => handleFormSubmit("file", e)} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
</label>

ฉันต้องการฟังก์ชัน js ที่รับไฟล์ xlsx และจากนั้นแปลงมันเป็นข้อมูล json

คำตอบ #1

โค้ดด้านล่างใช้ SheetJS เพื่ออ่านไฟล์ xlsx ใช้แคนวาสเพื่อโหลดภาพจาก URL และแปลงข้อมูลภาพเป็นสตริง Base64

<!DOCTYPE html>
<html lang="en">
<head>
    <title>XLSX Frontend Reading</title>
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body>
<input type="file" id="xlsxFileInput"/>
<script>
    const fileInput = document.getElementById('xlsxFileInput');

    fileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];

        // use FileReader read xlsx file
        const reader = new FileReader();
        reader.onload = function (e) {
            const data = new Uint8Array(e.target.result);

            const workbook = XLSX.read(data, {type: 'array'});

            const worksheet = workbook.Sheets[workbook.SheetNames[0]];

            const jsonData = XLSX.utils.sheet_to_json(worksheet, {header: 1});

            const headerRow = jsonData[0];
            let imageIndex = -1;
            let nameIndex = -1;
            //  find the  image index and name index
            for (let i = 0; i < headerRow.length; i++) {
                if (headerRow[i] === "image") {
                    imageIndex = i;
                }
                if (headerRow[i] === "name") {
                    nameIndex = i;
                }
                if (imageIndex >= 0 && nameIndex >= 0) {
                    break;
                }

            }

            console.log(imageIndex);
            console.log(nameIndex);

            let result = [];
            for (let i = 1; i < jsonData.length; i++) {
                const row = jsonData[i];
                const resultJsonData = {};
                for (let j = 0; j < row.length; j++) {
                    const cellValue = row[j];

                    if (j === imageIndex) {
                        console.log(cellValue);
                        //
                        const img = new Image();

                        // set the src attribute of the Image object to the URL of the image,it may be a read url in your operate machine
                        img.src = cellValue;

                        img.onload = function () {
                            const canvas = document.createElement('canvas');
                            const ctx = canvas.getContext('2d');
                            canvas.width = img.width;
                            canvas.height = img.height;
                            ctx.drawImage(img, 0, 0);
                            // transfer the image to base64
                            const base64String = canvas.toDataURL('image/jpeg');

                            resultJsonData.image = base64String;

                            console.log(base64String);
                        };
                    }


                    if (j === nameIndex) {
                        resultJsonData.name = cellValue;
                    }
                }
                result.push(resultJsonData);
            }
            console.log(result);

        };

    });
</script>

</body>
</html>

คำตอบ #2

คุณไม่สามารถอ่านรูปภาพเหมือนกับการอ่านค่าสตริงจากไฟล์ xlsx ไฟล์ XLSX เป็นไฟล์เก็บถูกรวมซึ่งประกอบด้วยชุดไฟล์ XML วิธีแก้ปัญหาที่เป็นไปได้ดีที่สุดอาจเป็นการอ่านมันด้วยไลบรารี ZIP แล้วตรวจดูว่ารูปภาพถูกยึดอยู่ที่ไหน (เมื่อคุณเปิดไฟล์ xlsx ใน LibreOffice ตัวอย่างเช่น คุณจะได้รับตัวเลือกในการยึดรูปภาพ) การวิเคราะห์ค่าการยึดนี้จะทำให้คุณทราบแถวและคอลัมน์