Hello. Tell me this situation. Use jquery Datatables with a button to export the table to png. Handler Code:

$( ".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("");

The result of the work is correct: goodresult

However, you need to remove the last column. jquery Datatables supports this. Add to handler

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

Everything is correctly hidden. But html2canvas produces the following result:

badresult

What could be the problem? I tried to change the styles of the text table - the text is also not displayed correctly. Delete a column from the duma or hide it too.

    1 answer 1

    Problem solved. Everything turned out to be quite simple. Datatables for some reason applied the style for sorting buttons to the wrong table elements. As a result, opacity 0.5. Solution options:

    1. Change the opacity in dataTables.bootstrap.min.css from 0.5 to 1.
    2. Disable sorting for tables that will be exported when ordering: false initialized ordering: false

    I did not fully understand what is happening here, but the problem is this.