Как решить проблему с кодировкой при чтении Excel файла?

Question

[Александр Яковлев]

Пытаюсь вывести таблицу Excel на сайт, но происходит проблема с кодировкой. Весь функционал работает, только с кириллицей проблемы.

Для работы с таблицами использовал библиотеку Sheet.js.

import xlsx from "xlsx";

export default class Table {
    constructor(selectorTable, selectorBtnDownload, selectorBtnSave, selectorInputUpload) {
        this.table = document.querySelector(selectorTable);
        this.btnDownload = document.querySelector(selectorBtnDownload);
        this.btnSave = document.querySelector(selectorBtnSave);
        this.inputUpload = document.querySelector(selectorInputUpload);
    }

    htmlTableToExcel() {
        const file = xlsx.utils.table_to_book(this.table);

        xlsx.write(file, { bookType: "xlsx", bookSST: true, type: "base64", });
        xlsx.writeFile(file, "file.xlsx", { cellStyles: true, });
    }

    _setEventForBtnDownload() {
        if (!this.btnDownload) {
            return;
        }

        this.btnDownload.addEventListener("click", this.htmlTableToExcel.bind(this));
    }

    _getElementTable(htmlResult) {
        const block = document.createElement("div");

        block.innerHTML = htmlResult;

        return block.querySelector("table");
    }

    _setEventForUploadInput() {
        this.inputUpload.addEventListener("change", (e) => {
            const reader = new FileReader();

            reader.readAsArrayBuffer(e.target.files[0]);

            reader.addEventListener("load", () => {
                this.inputUpload.classList.add("is-valid");
                this.inputUpload.classList.remove("is-invalid");

                const data = new Uint8Array(reader.result);
                const wb = xlsx.read(data, { type: "array", });
                const htmlStr = xlsx.write(wb, { type: "binary", bookType: "html", cellStyles: true, });
                const table = this._getElementTable(htmlStr);

                this.table.innerHTML = table.innerHTML;
            });

            reader.addEventListener("error", () => {
                this.inputUpload.classList.remove("is-valid");
                this.inputUpload.classList.add("is-invalid");

                throw reader.error;
            });
        });
    }

    init() {
        this._setEventForBtnDownload();
        this._setEventForUploadInput();
    }
}

Excel


Вывод

Answer 1

[Aetae]

Измени:
const htmlStr = xlsx.write(wb, { type: "binary"
на:
const htmlStr = xlsx.write(wb, { type: "string"

"binary" - это спецформат т.н. "бинарная стока", она подходит для записи в файл напрямую побайтово, но не подходит для отображения на экране.

Answer 2

[Smirator]

Привет. Есть сомнения, но кажется, что кириллица не поддерживается из-за того, что не задана нужная кодировка.
Как понимаю, в вашем коде за это отвечают: xlsx.write и xlsx.read.

Я бы попробовал поменять

const htmlStr = xlsx.write(wb, { type: "binary", bookType: "html", cellStyles: true, });

на:

const htmlStr = xlsx.write(wb, { type: "binary", bookType: "html", bookSST: true, cellStyles: { dateNF: 'YYYY-MM-DD HH:mm:ss', }, type: "base64", });

и
const wb = xlsx.read(data, { type: "array", });

на:

const wb = xlsx.read(data, { type: "array", cellStyles: true, });

Теперь для кириллических символов должна применятся utf-8. После проверки отпишитесь, пожалуйста. Самому интересно)

Comments

[Александр Яковлев]

Сейчас вместо html приходит какая-то непонятная строка

[Smirator]

Хм, хороший вопрос. Надо подумать

[MaxKozlov]

Александр Яковлев, Эта непонятная строка - что-то в кодировке base64