jquery datatables & html2 canvas серый текст

303
26 января 2017, 03:58

Здравствуйте. Подскажите такая ситуация. Используется jquery Datatables с кнопкой для экспорта таблицы в png. Код обработчика:

       $( ".export" ).clone().appendTo( ".table_to_export" );
        html2canvas($(".table_to_export"), 
        {
            onrendered: function (canvas) {
                var a = $("<a>").attr("href", canvas.toDataURL('image/png'))
                .attr("download", "Экспорт таблицы.png")
                .appendTo("body");
                a[0].click();
                a.remove();
            }
        });
        $(".table_to_export").html("");

Результат работы корректный:

Однако требуется убрать последний столбец. jquery Datatables это поддерживает. Добавляю в обработчик

 table.column( 7 ).visible( false );

Всё корректно скрывается. Но html2canvas при этом выдаёт следующий результат:

В чём может быть проблема? Менять стили таблицы текста пробовал - бестолку текст так же выводится не корректно. Удалять столбец из дума или скрывать его тоже.

Answer 1

Проблема решена. Всё оказалось довольно просто. Datatables по какой то причине применял стиль для кнопок сортировки к не тем элементам таблицы. В итоге и opacity 0.5. Варианты решения:

  1. Поменять opacity в dataTables.bootstrap.min.css c 0.5 на 1.
  2. Отключить сортировку для таблиц которые будут экспортироваться при инициализации ordering: false

Так и не понял полностью что тут происходит, но проблема в этом.