Экспорт DataTables в Excel с оранжевым фоном

Question

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

Мой вопрос: как мне поступить так, чтобы я мог иметьа также оранжевый фон?

buttons: [{
  extend: 'excel',
  text: 'Save as Excel',
  customize: function(xlsx) {
    var sheet = xlsx.xl.worksheets['sheet1.xml'];
    $('row c[r^="F"]', sheet).each(function() {
      if ($('is t', this).text().toUpperCase() == 'Very aware'.toUpperCase() || $('is t', this).text().toUpperCase() == 'Reasonably aware'.toUpperCase()) {
        $(this).attr('s', '15');
      } else if ($('is t', this).text().toUpperCase() == 'Slightly aware'.toUpperCase()) {
        $(this).attr('s', '10');
      } else if ($('is t', this).text().toUpperCase() == 'Unaware'.toUpperCase()) {
        $(this).attr('s', '10');
      } else {

      }
    });
  }
}]

Answer 1

Поскольку встроенные стили таблиц данных включают в себя параметры только для серого #D9D9D9, красного #D99795, зеленого #C6EfCE и синего #C6CFEF фона, вы должны добавить нужные вам стили.

Datatables хранит встроенные стили в объекте с именем excelStrings в свойстве xl/styles.xml. См .: Buttons / js / buttons.html5.js @ Строка: 582

Вы можете добавлять собственные стили, расширяя / настраивая кнопку Excel следующим образом:

{
  extend: 'excel',
  text: 'Save as Excel',
  customize: function(xlsx) {
    let sheet = xlsx.xl.worksheets['sheet1.xml'];

    let styles = xlsx.xl['styles.xml']; // Get current styles

    let last_fills_index = $('cellXfs fills', styles).length - 1;
    let last_xf_index = $('cellXfs xf', styles).length - 1;

    let fill_orange = '<fill><patternFill patternType="solid"><fgColor rgb="ffffb024" /><bgColor indexed="64" /></patternFill></fill>';
    let style_fill_orange = '<xf numFmtId="0" fontId="4" fillId="' + (last_fills_index + 1) + '" borderId="0" applyFont="1" applyFill="1" applyBorder="1"/>';

    styles.childNodes[0].childNodes[2].innerHTML += fill_orange; // childNodes[2] -> fills
    styles.childNodes[0].childNodes[5].innerHTML += style_fill_orange; // childNodes[5] -> cell xfs

    let sOrangeBackground = last_xf_index + 1;

    $('row c[r^="F"]', sheet).each(function() {
      if ($('is t', this).text().toUpperCase() == 'Very aware'.toUpperCase() || $('is t', this).text().toUpperCase() == 'Reasonably aware'.toUpperCase()) {
        $(this).attr('s', '15');
      } else if ($('is t', this).text().toUpperCase() == 'Slightly aware'.toUpperCase()) {
        $(this).attr('s', sOrangeBackground);
      } else if ($('is t', this).text().toUpperCase() == 'Unaware'.toUpperCase()) {
        $(this).attr('s', '10');
      }
    });
  }
}