Question

我创建了一个ng-directive，它解析数据并在点击应用该指令的按钮时将数据导出到excel。以下是将数据导出为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中构建整个数据时，因此我无法使用HTM页面的CSS属性。所以我想知道是否可以通过代码设置自动换行和列宽等选项？或者，如果我在这里尝试做什么的替代方案。

Answer 1

检查codepen。它会在加载后尝试下载文件。它基于我之前在评论中链接的answer。它还包括filesaver脚本的缩小版本。请查看TableToExcel变量，特别是那里设置的template。

为了您的理解，Excel文件是基于XML的，因此您可以使用简单的HTML样式表来增加宽度，设置颜色或边框。从codepen中，这是表格格式的相关部分：

<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并不错。

codepen需要调整，具体取决于excel的版本等。我希望这会让你开始。

Answer 2

使用CSV，您无法格式化数据或Excel样式。它只能导出数据。

您可以尝试一些外部工具，例如： Excelbuilderjs

在将数据导出到excel / csv angularjs时设置列宽和自动换行属性

2 个答案: