I have created my Data table from the angular 2 website. Now I want to export my json data to PDF,excel using angular 2 framework.
Kindly give me suggestion how can I achieve that or any link if you have.
Regards
I have created my Data table from the angular 2 website. Now I want to export my json data to PDF,excel using angular 2 framework.
Kindly give me suggestion how can I achieve that or any link if you have.
Regards
Use jsPDF to convert from JSON to PDF.
And AlaSQL to convert from JSON to Excel (*.xls, *.xlsx).
(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 + '"';
}
}
};
});
})();
Maybe you should look for how to export your data-table
to a JSON
format object then there is plenty of examples how to convert a JSON to PDF/CSV and could be used in native JavaScript
or TypeScript
.
Those links may help you:
Converting json to pdf using js frameworks and
http://jsfiddle.net/hybrid13i/JXrwM/
I was finally used this one:
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.`);
}
})
}