嵌套 json 对象，使用 primeNG 和 dataTable 进行 CSV 导出

Question

我们有一个嵌套 JSON 对象，用于对象导出 CSV 的 json 平面级别正在工作，但对于嵌套对象它不工作 （站点对象）.

对于此实现，我们使用了 PrimeNg 库：

下面是json响应：

 "data": [
        {
            "towerId": "gfsjfdy32ur",
            "towerName": "qjdhkud",
            "exAxisTower": false,
            "tbuShareable": null,
            "technologyPartnerRNP": "TP_RNP_EID",
            "technologyPartnerTNP": "TP_TNP_EID",
            "ssrLongitude": "323",
            "ssrLatitude": "323",
            "region": "REG_J",
            "province": "PROV_SU",
            "district": "PROV_SU_D1",
            "scheme": null,
            "towerType": "TYPE_CL",
            "towerKind": null,
            "category": "CAT_SM",
            "proposedHeight": 323,
            "useShelter": "SHELT_Y",
            "azimuth": "dewdew",
            "towerProviderNumber": null,
            "towerProviderName": null,
            "farEnd1": null,
            "farEnd2": null,
            "farEnd3": null,
            "towerStatus": "Plan on Progress",
            "projectStatus": "SSR Completed",
            "sites": [
                {
                    "id": "6a056c60-5774-40ad-bd00-2523cbfdb8a4",
                    "created": "2019-12-09T10:52:18.293+0000",
                    "createdId": "ff06c5a4-135c-40b7-83f3-3648ec035efc",
                    "modified": "2019-12-09T10:52:18.293+0000",
                    "modifiedId": "ff06c5a4-135c-40b7-83f3-3648ec035efc",
                    "siteId": "siteid value 1",
                    "siteName": "site name value 1",
                    "ssrId": "d6c4fa53-a8f3-4b53-b592-a0c1646c1d46"
                },
                {
                    "id": "6a056c60-5774-40ad-535434",
                    "created": "2019-12-09T10:52:18.293+0000",
                    "createdId": "ff06c5a4-135c-40b7-83f3-3648ec035efc",
                    "modified": "2019-12-09T10:52:18.293+0000",
                    "modifiedId": "ff06c5a4-135c-40b7-83f3-3648ec035efc",
                    "siteId": "site Id value 1",
                    "siteName": " site Name value2",
                    "ssrId": "d6c4fa53-a8f3-4b53-b592-a0c1646c1d46"
                }
            ],
            "projectName": "fje",
            "commitmentNumber": null,
            "rfiSLA": null,
            "trialPeriod": null,
            "cmeType": null,
            "ownerShip": null,
            "banDocument": null,
            "slaDocument": null
        },
        {
            "towerId": "327",
            "towerName": "dws",
            "exAxisTower": false,
            "tbuShareable": null,
            "technologyPartnerRNP": "TP_RNP_EID",
            "technologyPartnerTNP": "TP_TNP_EID",
            "ssrLongitude": "324234",
            "ssrLatitude": "34324",
            "region": "REG_J",
            "province": "PROV_AC",
            "district": "PROV_AC_D2",
            "scheme": null,
            "towerType": "TYPE_CL",
            "towerKind": null,
            "category": "CAT_MA",
            "proposedHeight": 434,
            "useShelter": "SHELT_Y",
            "azimuth": "2342432",
            "towerProviderNumber": null,
            "towerProviderName": null,
            "farEnd1": null,
            "farEnd2": null,
            "farEnd3": null,
            "towerStatus": "Plan on Progress",
            "projectStatus": "SSR Completed",
            "sites": [
                {
                    "id": "00db69ed-dfd0-439a-a879-bc8dfaf5a9bf",
                    "created": "2019-12-09T10:54:06.686+0000",
                    "createdId": "ff06c5a4-135c-40b7-83f3-3648ec035efc",
                    "modified": "2019-12-09T10:54:06.686+0000",
                    "modifiedId": "ff06c5a4-135c-40b7-83f3-3648ec035efc",
                    "siteId": "",
                    "siteName": "",
                    "ssrId": "761e6545-9179-4fbb-8c80-eaa0c8095ad7"
                }
            ],
            "projectName": "ewe",
            "commitmentNumber": null,
            "rfiSLA": null,
            "trialPeriod": null,
            "cmeType": null,
            "ownerShip": null,
            "banDocument": null,
            "slaDocument": null
        }
    ]

CSV 应按以下格式导出：

假设在站点对象中有nth对象然后这些许多站点ID和站点名称 导出csv时需要加上。

我们正在使用 primeNg Table。

Answer 1

prime-ng table不支持export csv方式你要。所以，必须要写。

我写了导出csv的方法。我希望这有帮助。

Stackblitz Sample

data: Data[];
csvSeparator = ";";
exportFilename = "exportData";
columns = [
    { field: "towerId", header: "towerId", exportable: true },
    { field: "towerName", header: "towerName", exportable: false },
    { field: "province", header: "province", exportable: true },
    { field: "district", header: "district", exportable: true },
    {
        field: "sites.siteId",
        header: "sitesid",
        exportable: true,
        details: true
    },
    {
        field: "sites.siteName",
        header: "siteName",
        exportable: true,
        details: true
    }
]; 

exportCSV() {
    let csv = '';
    const csvHeaders = new Map();

    this.data.forEach((record, i) => {
        for (let i = 0; i < this.columns.length; i++) {
            const column = this.columns[i];
            if (column.exportable !== false && column.field) {
                if (column.details) {
                    const fields = column.field.split('.');
                    const detailField = fields[fields.length - 1];
                    record[fields[0]].forEach((detailRecord, j) => {
                        const csvHeader = '"' + (column.header || column.field) + j + '"';
                        const detailFieldId = detailField + j;
                        if (!csvHeaders.has(detailFieldId)) {
                            csvHeaders.set(detailFieldId, csvHeader);
                        }
                        let detailCellData = detailRecord[detailField];
                        if (detailCellData != null) {
                            detailCellData = String(detailCellData).replace(/"/g, '""');
                        } else {
                            detailCellData = '';
                        }
                        csv += '"' + detailCellData + '"';

                        if (i < (this.columns.length - 1)) {
                            csv += this.csvSeparator;
                        }
                    });
                } else {
                    const csvHeader = '"' + (column.header || column.field) + '"';
                    if (!csvHeaders.has(column.field)) {
                        csvHeaders.set(column.field, csvHeader);
                    }
                    let cellData = record[column.field];
                    if (cellData != null) {
                        cellData = String(cellData).replace(/"/g, '""');
                    } else {
                        cellData = '';
                    }
                    csv += '"' + cellData + '"';

                    if (i < (this.columns.length - 1)) {
                        csv += this.csvSeparator;
                    }
                }
            }
        }
        csv += '\n';
    });
    csv = Array.from(csvHeaders.values()).join(this.csvSeparator) + '\n' + csv;
    const blob = new Blob([csv], {
        type: 'text/csv;charset=utf-8;'
    });

    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveOrOpenBlob(blob, this.exportFilename + '.csv');
    } else {
        const link = document.createElement('a');
        link.style.display = 'none';
        document.body.appendChild(link);
        if (link.download !== undefined) {
            link.setAttribute('href', URL.createObjectURL(blob));
            link.setAttribute('download', this.exportFilename + '.csv');
            link.click();
        } else {
            csv = 'data:text/csv;charset=utf-8,' + csv;
            window.open(encodeURI(csv));
        }
        document.body.removeChild(link);
    }
}

嵌套 json 对象，使用 primeNG 和 dataTable 进行 CSV 导出

Nested json object with CSV export using primeNG with dataTable

angular

angular7

export-to-csv

primeng-table