My requirement to download date in PDF format. Except nested JSON remaining elements are populated in PDF. Nested JSON displayed as {Object Object}. I tried lot of solutions suggested in internet haven't found solution.
Can anyone give me the suggestion.
jspdf, angular8
The columns which are displayed in PDF
var columns = [
{title: "ID", dataKey: "id"},
{title: "Name", dataKey: "name"},
{title: "Country", dataKey: "address"}
];
The content which is displayed in PDF, columns and rows are mapped using dataKey. Id and Name both are single elements in JsonArray but the address field is a nested JsonObject. I am trying to access the address.country but it is not displaying.
var rows = [
{id: 1, name: "chakri", address: {country: "Tanzania"}},
{id: 2, name: "hari", address: {country: "Kazakhstan"}},
{id: 3, name: "venki", address: {country: "Madagascar"}}
];
id, name values are populated but address is nested JSON country files is not populating in pdf instead in place of country it is showing [object Object]
exportPdf() {
import("jspdf").then(jsPDF => {
import("jspdf-autotable").then(x => {
const doc = new jsPDF.default(0,0);
doc.autoTable(this.columns, this.rows);
doc.save('primengTable.pdf');
})
})
}
I did some more research and using Access nested JSON property in jspdf autotable plugin as a guide, I came up with a solution that gets the country property.
JSFiddle to see it work: https://jsfiddle.net/mu4v06dh/1/
var columns = [
{title: "ID", dataKey: "id"},
{title: "Name", dataKey: "name"},
{title: "Country", dataKey: "address", displayProperty: "country"}
];
var rows = [
{id: 1, name: "Shaw", address: {country: "Tanzania"}},
{id: 2, name: "Nelson", address: {country: "Kazakhstan"}},
{id: 3, name: "Garcia", address: {country: "Madagascar"}}
];
var doc = jsPDF();
doc.autoTable({
body: rows,
columns: columns,
didParseCell: function(data) {
if (data.column.raw.displayProperty) {
var prop = data.column.raw.displayProperty;
var text = data.cell.raw[prop];
if (text && text.length > 0) {
data.cell.text = text;
}
}
}
});
doc.save('table.pdf');
<script src="https://unpkg.com/jspdf@1.3.3/dist/jspdf.min.js"></script>
<script src="https://unpkg.com/jspdf-autotable@3.2.11/dist/jspdf.plugin.autotable.js"></script>