如何使用 Angular 2 将我的 json 数据导出为 pdf、excel

Posted 2023-02-19

【中文标题】如何使用 Angular 2 将我的 json 数据导出为 pdf、excel

【英文标题】：How to export my json data into pdf,excel using angular 2

【发布时间】：2016-09-24 05:19:44

【问题描述】：

我从 angular 2 网站创建了我的数据表。现在我想使用 Angular 2 框架将我的 json 数据导出为 PDF，excel。

如果你有的话，请给我建议我如何实现这个或任何链接。

问候

【问题讨论】：

你要使用插件吗？

medium.com/@darilldrems/… 这可能就是您要找的。否则，您可以通过向 php 之类的请求发送数据并在那里进行处理。

【参考方案1】：

使用jsPDF 将 JSON 转换为 PDF。

和AlaSQL 从 JSON 转换为 Excel（*.xls、*.xlsx）。

【参考方案2】：

(function () 
    'use strict';

    angular.module('ngJsonExportExcel', [])
        .directive('ngJsonExportExcel', function () 

            return 
                restrict: 'AE',
                scope: 
                    data : '=',
                    filename: '=?',
                    reportFields: '=',
                    separator: '@'
                ,

                link: function (scope, element) 
                    scope.filename = !!scope.filename ? scope.filename : 'SalesReport';

                    var fields = [];
                    var header = [];
                    var separator = scope.separator || ',';

                    angular.forEach(scope.reportFields, function(field, key) 
                        if(!field || !key) 
                            throw new Error('error json report fields');
                        

                        fields.push(key);
                        header.push(field);
                    );

                    element.bind('click', function() 
                        var bodyData = _bodyData();
                        var strData = _convertToExcel(bodyData);

                        var blob = new Blob([strData], type: "text/plain;charset=utf-8");

                        return saveAs(blob, [scope.filename + '.csv']);
                    );

                    function _bodyData() 
                        var data = scope.data;
                        var body = "";
                        angular.forEach(data, function(dataItem) 
                            var rowItems = [];

                            angular.forEach(fields, function(field) 
                                if(field.indexOf('.')) 
                                    field = field.split(".");
                                    var curItem = dataItem;

                                    // deep access to obect property
                                    angular.forEach(field, function(prop)
                                        if (curItem !== null && curItem !== undefined) 
                                            curItem = curItem[prop];
                                        
                                    );

                                    data = curItem;
                                
                                else 
                                    data = dataItem[field];
                                

                                var fieldValue = data !== null ? data : ' ';

                                if (fieldValue !== undefined && angular.isObject(fieldValue)) 
                                    fieldValue = _objectToString(fieldValue);
                                

                                if(typeof fieldValue == 'string') 
                                    rowItems.push('"' + fieldValue.replace(/"/g, '""') + '"');
                                 else 
                                    rowItems.push(fieldValue);
                                
                            );

                            body += rowItems.join(separator) + '\n';
                        );

                        return body;
                    

                    function _convertToExcel(body) 
                        return header.join(separator) + '\n' + body;
                    

                    function _objectToString(object) 
                        var output = '';
                        angular.forEach(object, function(value, key) 
                            output += key + ':' + value + ' ';
                        );

                        return '"' + output + '"';
                    
                
            ;
        );
)();

【参考方案3】：

也许您应该寻找如何将您的 data-table 导出为 JSON 格式对象，然后有很多示例如何将 JSON 转换为 PDF/CSV 并且可以在本机 javascript 或 TypeScript 中使用. 这些链接可以帮助您： Converting json to pdf using js frameworks 和 http://jsfiddle.net/hybrid13i/JXrwM/

【参考方案4】：

我终于用上了这个：

    function downloadExcelFile(ev) 
        connectionService.getExcelExport(function (response) 
            if (response.status == 200) 

                /** 
                 * Export data to csv file
                 */
                let blob = new Blob([response.data], type: 'text/csv');
                let filename = `export.csv`;
                if(window.navigator.msSaveOrOpenBlob) 
                    window.navigator.msSaveBlob(blob, filename);
                
                else
                    let elem = window.document.createElement('a');
                    elem.href = window.URL.createObjectURL(blob);
                    elem.download = filename;
                    document.body.appendChild(elem);
                    elem.click();
                    document.body.removeChild(elem);
                

                console.log(`export excel file is successful.`);
            
        )
    

【参考方案5】：

我可以部分回答您的问题，以便您可以将您的JSON 数据导出到excel。您可以将XLSX 库用于Angular 2+。

假设您的JSON 数据类似于分配给readyToExport 的数据，因此显示了如何导出您的JSON 数据。

public export() 
const readyToExport = [
  id: 1, name: 'a', address: 'x',
  id: 2, name: 'b', address: 'y',
  id: 3, name: 'c', address: 'z'
];

const workBook = XLSX.utils.book_new(); // create a new blank book
const workSheet = XLSX.utils.json_to_sheet(readyToExport);

XLSX.utils.book_append_sheet(workBook, workSheet, 'data'); // add the worksheet to the book
XLSX.writeFile(workBook, 'temp.xlsx'); // initiate a file download in browser