Question

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

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

Answer 1

yourdata = jsonData

var columnsLong = getColumns().concat([
        {title: "Title with\nlinebreak", dataKey: "text2"},
        {title: "Long text column", dataKey: "text"},
    ]);

你的HTML中的

：

var res = doc.autoTableHtmlToJson($(".printReportsCaveat")[0]); 
    doc.autoTable(res.columns, res.data, {
                         columnStyles : {'Plant':{columnWidth: 'wrap'},
                             'Mine':{columnWidth: 'wrap'},
                             0:{textColor: [0,105,170]}
                         },
                          margin: {top: 55, bottom : 110},
                          headerStyles: {
                             overflow: 'linebreak',
                             // columnWidth: 'auto',
                              halign: 'center'
                             },
                            styles : {
                                 overflow: 'linebreak',
                                  halign: 'center',
                                  fontSize: 8
                            },
                            createdCell: function(cell, data) {
                                var group = $('#groupByValue').val();
                                addColorToCell(group, level3Flag, level2Flag, data, cell);                          
                            },

                            addPageContent : function(data) {
                                printHeadNFoot(doc, userDtl, data);                             
                            },
                            drawCell: function(cell, data) {
                                designCell(data,doc);                             
                            },
                      });

组件中的

：

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

希望你会帮助你

Answer 2

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

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

Search for how to download files within Angular
下载完成后，该文件现在为“本地”，请使用something like this

Answer 3

不可能。

XLS是二进制格式。

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

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

Answer 4

我认为如果没有js库，你将无法完成这项工作。 您需要的是在带有打字稿的Angular项目中使用它的类型。

要创建Excel文件，您可以使用exceljs之类的内容。要在项目中使用它，还要安装可以找到here的输入。我不确定这个库是否合适......之前没有使用它。

要下载，您应该使用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 5

当我将“，”替换为“;”时，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;
  }

我希望这对某人有帮助。

Angular导出Excel客户端

5 个答案: