在jspdf autotable插件中访问嵌套的JSON属性

Question

在jspdf autotable插件中访问嵌套的JSON属性

3

我刚开始使用jsPDF和AutoTable插件，对于我们的使用场景来说几乎完美。有一个问题…

在列定义中是否可以将dataKey分配给映射到表格的JSON中的嵌套属性？

我们有一个如下所示的JSON结构：

"Primary_Key": "12345",
"Site_Name": {
  "Address_Name": "Address 1"
  },
"Default_Screen_Name": "Bob",
"Full_Name": "Bob Smith"

如果我们使用以下列：

var columns = [
  { title: "ID", dataKey: "Primary_Key" },
  { title: "Screen Name", dataKey: "Default_Screen_Name" },
  { title: "Full Name", dataKey: "Full_Name" }];

一切工作得非常完美。但是，我们也希望做类似以下的事情：

var columns = [
  { title: "ID", dataKey: "Primary_Key" },
  { title: "Iterations", dataKey: "Iterations" },
  { title: "Screen Name", dataKey: "Default_Screen_Name" },
  { title: "Site Name", dataKey: "Site_Name.Address_Name" }];

我们使用 Site_Name.Address_Name 来索引嵌套的JSON对象以检索值。这样的操作是否可行？

- Gary Ewan Park

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon Bengtsson · Accepted Answer

目前还不能实现。您可以在这里关注此功能的请求。您目前的选项是在传递给autotable之前将数据平铺，或者使用钩子来提取您想要的特定文本。可以通过以下方式完成：

var columns = [
    {title: "ID", dataKey: "id"},
    {title: "Name", dataKey: "name"}, 
    {title: "Country", dataKey: "address"}
];
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(columns, rows, {
   didParseCell: function(data) {
       if (data.column.dataKey === 'address') {
           data.cell.text = data.cell.raw.country;
       }
   }
});
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@2.3.1/dist/jspdf.plugin.autotable.js"></script>

更新：针对评论区的额外问题进行回答：

var columns = [
    {title: "Country", dataKey: "address", displayProperty: "country"},
    ...
];
var rows = [...];

...

didParseCell: function(data) {
   if (data.column.dataKey === 'address') {
       var prop = data.column.raw.displayProperty;
       data.cell.text = data.cell.raw[prop];
   }
}