如何在jspdf angular8中显示嵌套的Json

Question

我要求下载 PDF 格式的日期。除了嵌套 json 之外，其余元素均以 PDF 格式填充。嵌套 Json 显示为 {Object Object}。我尝试了很多互联网上建议的解决方案都没有找到解决方案。

谁能给我建议。

jspdf, angular8

以PDF格式显示的栏目

 var columns = [
            {title: "ID", dataKey: "id"},
            {title: "Name", dataKey: "name"}, 
            {title: "Country", dataKey: "address"}
        ];

PDF中显示的内容，行列使用dataKey进行映射。 Id 和 Name 都是 JsonArray 中的单个元素，但地址字段是嵌套的 JsonObject。我正在尝试访问 address.country 但它没有显示。

        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 值已填充，但地址是嵌套的 json pdf 中未填充国家/地区文件，而是代替它显示的国家/地区 [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');
                    })
                })
            }

Answer 1

我做了一些更多的研究并使用作为指导，我想出了一个解决方案，让国家属性。

JSFiddle 以查看其工作情况：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>

Answer 2

我在 this post 中创建了一个示例。简而言之：必须清除父单元格，并且必须在 didParseCell 期间设置高度，并且必须在 didDrawCell

期间添加新的 table 作为额外内容

如何在jspdf angular8中显示嵌套的Json

How to display nested Json in jspdf angular8

angular

jspdf

jspdf-autotable