设置列宽和自动换行特性，同时将数据导出到Excel / CSV angularjs [英] Set column-width and word wrap properties while exporting data to excel/csv angularjs

问题描述

我创建了一个NG-指令，它会分析数据并将数据导出到excel上应用该指令按钮的点击。这里是code将数据导出到CSV格式。

I have created a ng-directive which parses the data and export the data to excel on click of a button on which the directive is applied. Here is the code to export the data to the csv format.

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属性。所以我想知道是否可以设置像自动换行和列宽通过code的选项？或者，如果有任何替代什么，我想在这里做的。

The issue that I am facing is that the data that is being exported is longer than the default column width of excel sheet, which results in the data being shown truncated in the print out of the excel. The problem here is that as I am building the entire data in the JS, thus I cannot use the CSS properties of the HTM page. So I want to know if it is possible to set the option like word wrap and column width through the code? Or, if there is any alternative to what I am trying to do here.

推荐答案

勾选此的 codePEN 。它会尝试尽快加载下载文件。它是基于在回答我挂在评论较早。它还包括 filesaver 脚本缩小的版本。看一看在 TableToExcel 变量，特别是模板在那里成立。

Check this codepen. It will try to download a file as soon as it loads. It's based on the answer I linked to in a comment earlier. It also includes the minified version of the filesaver script. Have a look at the TableToExcel variable, in particular the template set up in there.

有关你的理解，Excel文件是基于XML的，所以你可以使用简单的HTML样式表来增加宽度，设置颜色或边框。从codePEN，这是表格格式的相关位：

For your understanding, Excel files are XML based, so you can use simple HTML style tables to increase the width, set colors or borders. From the codepen, this is the relevant bit of table formatting:

<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>

如果您有复杂的要求，这可能会变得复杂。在这种情况下，使用Excelbuilderjs的Sathish所在的建议，也不错。

This might get complicated if you have complicated requirements. In that case, Sathish' suggestion of using Excelbuilderjs is not bad.

在codePEN需要调整，具体取决于Excel的等的版本我希望这将让你开始。

The codepen needs tweaking, depending on the versions of excel etc. I hope this will get you started.

这篇关于设置列宽和自动换行特性，同时将数据导出到Excel / CSV angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！