excel - Angular 导出 Excel 客户端

Question

我正在使用 Angular v4，我想我如何从组件中的对象开始构建 Excel 电子表格。我需要单击一个按钮来下载 Excel 文件，我必须在客户端执行此操作。我有一个由数组组成的 json 文件，我需要将其传输到 excel 文件中，样式可能可以自定义。是否可以？如果是，如何？

编辑:请不要使用 js 库，需要使用 Typescript 和 Angular 来完成此操作

Answer 1

你的数据= jsonData

ConvertToCSV(objArray) {
            var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
              var str = '';
            var row = "";

            for (var index in objArray[0]) {
                //Now convert each value to string and comma-separated
                row += index + ',';
            }
            row = row.slice(0, -1);
            //append Label row with line break
            str += row + '\r\n';

            for (var i = 0; i < array.length; i++) {
                var line = '';
                for (var index in array[i]) {
                    if (line != '') line += ','

                    line += array[i][index];
                }
                str += line + '\r\n';
            }
            return str;
        }

在您的 html 中:

<button (click)="download()">export to excel</button>

在组件中:

download(){    
 var csvData = this.ConvertToCSV(yourdata);
                        var a = document.createElement("a");
                        a.setAttribute('style', 'display:none;');
                        document.body.appendChild(a);
                        var blob = new Blob([csvData], { type: 'text/csv' });
                        var url= window.URL.createObjectURL(blob);
                        a.href = url;
                        a.download = 'User_Results.csv';/* your file name*/
                        a.click();
                        return 'success';
}

希望对你有帮助