Angular导出Excel客户端

Question

我正在使用Angular v4，我想如何从组件中的对象开始构建Excel电子表格。 我需要点击一个按钮下载Excel文件，我必须做这个客户端。 我有一个由数组组成的json文件，我需要在excel文件上传输它，可能是风格可定制的。 可能吗？ 如果有，怎么样？

编辑：请不要使用js库，需要使用Typescript和Angular来完成

Answer 1

yourdata = 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';
}

希望你能帮助你

Answer 2

根据您的要求，您可能不喜欢这个答案; 但是，如果没有JS库，你就会重新发明轮子。 我个人发现Excel XML格式令人难以置信，使用下面的库（可从Angular中调用），您可以从已经完成的工作中受益。

您的设计有两个部分，即内容的下载和打开/编辑，Angular也不是相关的，因为Angular只是完成工作的容器。

1. 搜索如何在Angular中下载文件
2. 下载完成后，文件现在是“本地”，使用类似的东西打开它

Answer 3

我想你不会在没有js库的情况下完成这项工作。 你需要的是在你的Angular项目中使用打字稿的类型。

要创建excel文件，您可以使用exceljs之类的东西 。 要在项目中使用它，还要安装此处可以找到的类型。 我不确定这个库是否合适......以前没用过它。

要下载，您应该使用FileSaver.js （我已经使用过它）。

npm install file-saver --save

......和打字：

npm install @types/file-saver --save-dev

对于使用FileSaver.js，将以下导入放入组件：

import * as FileSaver from 'file-saver';

要触发下载，请使用：

FileSaver.saveAs(fileData, "filename.xlsx")

'fileData'必须是Blob。

希望这有所帮助。

Answer 4

当我用“;”代替“，”时，Vishwanath的回答对我有用。 在Typescript中，实现可能如下所示：

ConvertToCSV(objArray: any) {
    const array = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
    let str = '';
    let row = '';

    for (const index of Object.keys(objArray[0])) {
      row += `${index};`;
    }
    row = row.slice(0, -1);
    str += `${row}\r\n`;

    for (let i = 0; i < array.length; i++) {
      let line = '';
      for (const index of Object.keys(array[i])) {
        if (line !== '') {
          line += ';';
        }
        line += array[i][index];
      }
      str += `${line}\r\n`;
    }
    return str;
  }

我希望这可以帮助别人。

Answer 5

这是不可能的。

XLS是二进制格式。

项目Apache POI（ https://en.wikipedia.org/wiki/Apache_POI ）名称类为HSSF（可怕的SpreadSheet格式）。

我的建议，在服务器端进行。