Замените теги <img>текстовыми тегами HTML перед экспортом таблицы HTML в файл xls с использованием XLSX - PullRequest
Новая
       41

Замените теги <img>текстовыми тегами HTML перед экспортом таблицы HTML в файл xls с использованием XLSX

0 голосов
/ 16 января 2020

Мои функции для экспорта моей таблицы HTML в файл Excel с XLSX https://docs.sheetjs.com/#sheetjs - js -xlsx (Машинопись 3,5 / Angular 8): 

exportToExcel() {
    let tabledata = document.getElementById('serversTable');
    console.log(tabledata);
    const ws: XLSX.WorkSheet=XLSX.utils.table_to_sheet(tabledata);

    const wb: XLSX.WorkBook = XLSX.utils.book_new();

    XLSX.utils.book_append_sheet(wb, ws, 'Servers');

    /* save to file */
    XLSX.writeFile(wb, 'myproject.xlsx');
}

Это результат в консоли console.log(tabledata);:

enter image description here

Как видите, в моей таблице 5 строк, и в каждой строке есть столбец с именем 'OS 'и этот столбец имеет изображение в качестве содержимого (это, например, первая строка таблицы):

enter image description here

Проблема в том, что моя функция не удалось прочитать этот столбец, содержащий изображения, ячейки этого столбца пусты:

enter image description here

Итак, я хочу заменить все <img> тегов моей таблицы с помощью <span> или <p>, который должен содержать атрибут alt тега <img> перед экспортом. Вот что я сделал: 

exportToExcel() {
    let tabledata = document.getElementById('serversTable');
    let images: any = tabledata.getElementsByTagName('img');
    for(var i = 0; i < images.length; i++) {
      var os = images[i].alt;

      var sp1 = document.createElement("span");
      sp1.appendChild(document.createTextNode(os));

      images[i].parentNode.replaceChild(sp1, images[i]);
    }
    console.log(tabledata);

}

Есть проблема, есть теги img, которые не заменяются; это результат: enter image description here

enter image description here

РЕДАКТИРОВАТЬ:

Первая попытка экспорта: 3 img теги хорошо заменяются тегами span. Вторая попытка экспорта: 4 тега img хорошо заменяются тегами span. Третий, четвертый, пятый, ...: все теги img хорошо заменяются.

...