Установите свойства ширины столбца и слова при экспорте данных в excel/csv angularjs
Я создал ng-директиву, которая анализирует данные и экспортирует данные, чтобы преуспеть, нажав кнопку, на которую применяется директива. Вот код для экспорта данных в формат csv.
angular.module('employeesApp')
.directive('exportdetailsCsv', ['$parse', 'DetailsManagerService', function ( $parse, DetailsManagerService) {
return {
restrict: 'A',
scope: false,
link: function(scope, element, attrs) {
var data = '';
var csv = {
stringify: function(str) {
return '"' +
str.replace(/^\s\s*/, '').replace(/\s*\s$/, '') // trim spaces
.replace(/"/g,'""') + // replace quotes with double quotes
'"';
},
generate: function(claimDetails, employeeCode, employeeName) {
var dataToExport = claimDetails;
var dataLength = Object.keys(dataToExport).length;
var tableColumnsCount = Object.keys(dataToExport).length;
var row1 = [];
row1.push("Title");
row1.push(dataToExport["title"]);
var row2 = [];
row2.push("Employee Name");
row2.push(employeeName);
var row3 = [];
row3.push("Employee Code");
row3.push(employeeCode);
var row4 = [];
row4.push("Project");
row4.push(dataToExport["project"]);
data = row1 + "\n" + row2 + "\n" + row3 + "\n" + row4;
},
link: function(fileName, inData, fileType) {
var bData = inData ? inData : data;
if (bData && bData.length > 0) {
var blob = new Blob([bData], {type: (fileType || "text/csv") + ";charset=utf-8"});
saveAs(blob, fileName || 'Details.csv');
data = [];
}
}
};
$parse(attrs.exportdetailsCsv).assign(scope.$parent, csv);
}
};
}]);
Проблема, с которой я сталкиваюсь, заключается в том, что экспортируемые данные больше, чем ширина столбца по умолчанию для листа excel, что приводит к тому, что отображаемые данные усекаются в распечатке из excel. Проблема здесь в том, что, когда я строю все данные в JS, я не могу использовать CSS-свойства HTM-страницы. Поэтому я хочу знать, можно ли установить такой параметр, как перенос слов и ширина столбца через код? Или, если есть какая-то альтернатива тому, что я пытаюсь сделать здесь.
Ответы
Ответ 1
Отметьте codepen. Он попытается загрузить файл сразу после его загрузки. Он основан на ответе , с которым я связался в комментарии ранее. Он также включает уменьшенную версию filesaver script. Посмотрите на переменную TableToExcel
, в частности расположенную там template
.
Для вашего понимания файлы Excel основаны на XML, поэтому вы можете использовать простые таблицы стиля HTML, чтобы увеличить ширину, установить цвета или границы. Из кодекса это соответствующий бит форматирования таблицы:
<table
cellspacing="0"
rules="rows"
border="1"
style="color:Black;background-color:White;border-color:#CCCCCC;border-width:1px;border-style:None;width:100%;border-collapse:collapse;font-size:9pt;text-align:center;"
>
</table>
Это может усложниться, если у вас есть сложные требования. В этом случае предложение Sathish об использовании Excelbuilderjs неплохо.
Кодепен нуждается в настройке, в зависимости от версий excel и т.д. Надеюсь, это поможет вам начать.
Ответ 2
Используя CSV, вы не сможете форматировать данные или Excel Styling. это только для экспорта данных.
Можно попробовать некоторые внешние инструменты, такие как:
Excelbuilderjs