Я пытаюсь экспортировать данные, чтобы превзойти их с возможностью экспорта встроенных файлов. Я преобразовываю холст, содержащий диаграмму, в данные изображения base64 и сохраняю его в большом двоичном объекте и пытаюсь экспортировать большой двоичный объект в Excel. и Excel, похоже, не поддерживает строку изображения base64, поэтому я в конечном итоге использовал blob, также пытался экспортировать как URL по URL.createobjectURL (), но не похоже, что изображение отображается в экспортированном Excel.
var buttonCommon = {
exportOptions: {
format: {
body: function ( data, row, column, node ) {
//var canvas = node.childNodes["0"].$chartjs.toBase64Image();
var canvas = node.childNodes["0"];
var imgdata = canvas.toDataURL("image/png", 1.0);
var contentType = 'image/png';
var b64Data = imgdata.replace(/^data:image\/\w+;base64,/, "");
var blob = b64toBlob(b64Data, contentType);
const objectURL = URL.createObjectURL(blob);
return objectURL;
//var data = imgdata.replace(/^data:image\/\w+;base64,/, "");
//var unicode = atob(data);
//$.fn.dataTable.fileSave( new Blob( [ JSON.stringify( data ) ] ), 'Export.png');
//return unicode;
//const objectURL = URL.createObjectURL(new Blob( [ JSON.stringify( data ) ] ));
//return objectURL;
//var buf = new Buffer.from(data, 'base64');
//var newdata = imgdata.replace(/^data:image\/png/,'data:application/octet-stream');
//return data;
// Strip $ from salary column to make it numeric
//return column === s ? data.replace( /[$,]/g, '' ) : data;
}
}
}
};
$('#sample_table').DataTable({
dom: 'Bfrtip',
buttons: [
$.extend( true, {}, buttonCommon, {
extend: 'copyHtml5'
} ),
$.extend( true, {}, buttonCommon, {
extend: 'excelHtml5'
} ),
$.extend( true, {}, buttonCommon, {
extend: 'pdfHtml5'
} ),
$.extend( true, {}, buttonCommon, {
extend: 'print'
} )
],
"pageLength" : 2,
"iDisplayLength" : 2,
"lengthMenu" : [ [ 2, 4, -1 ], [ 2, 4, "All" ] ],
//"scrollY": "300px",
"scrollX" : true,
//"fixedColumns": {leftColumns: 1},
//"deferRender" : false,
//"pagingType": "full_numbers",
"serverSide" : false,
columnDefs: [
{
targets: '_all',
render: function (row_data, type, row) {
var canvas = document.createElement('canvas');//create canvas to insert the graph
canvas.setAttribute('width', '900');
canvas.setAttribute('height', '250');
var id_no = Math.floor(Math.random() * 1000000) + 1;
canvas.setAttribute('id', id_no.toString());
var docString = "<html>"+ canvas.outerHTML +"</html>";
return docString;
},
createdCell: function( cell, cellData, rowData, rowIndex, colIndex )
{
var x =0;
//create_line_chart(cell.lastElementChild.id, cellData.value_arr, cellData.idx);
}
}
],
"drawCallback": function( settings ) {
var table = $('#sample_table').DataTable();
table.cells({page:'current'}).eq(0).each( function ( index ) {
var cell = table.cell( index );
var data = cell.data();
var nod = cell.node();
var id = nod.lastChild.id;
create_line_chart(id, data.value_arr, data.idx);
} );
}
});
AddChartToTable(response);
},
error : function(err) {
console.log("error..");
}
});
});