Question

是否可以使用映射到表的对象的嵌套属性来定义单元格颜色？

对象的JSON结构为：

objects: [
{
  "agent": "agent_1",
  "days": {
     day_0: {
       "code": "ABC",
       "color": "#0062cc"
     },
     day_1: {
       "code": "DEF",
       "color": "#a09494b2"
     }
  },
  {
  [...]
  }
]

我有一个这样定义的表：

let columns = [
  {title: "Agent", dataKey: "agent"},
  {title: "january 1st", dataKey: "day_0"},
  {title: "january 2nd", dataKey: "day_1"}]

let rows = [
  {agent: "agent_1", day_0: "ABC", day_1: "DEF"},
  [...]
]

一切正常。但是我想动态设置每个日间单元格的颜色，并使用相应对象的颜色代码进行设置。像这样：

createdCell: function(cell, data) {
  {
     cell.styles.fillColor = "day_0.color";
  }
}

但是我不知道如何将数据传递到表中。可能吗？ displayProperty可以以任何方式提供帮助吗？

Answer 1

编辑：在这种情况下，需要jspdf-autotable v2.3.4

根据我们的评论讨论，我认为我了解您的问题。您可以尝试这样的操作（使用here中的hexToRgb函数）

var result = MyCollectionA.Concat(MyCollectionB.Concat(MyCollectionC
             .Concat<MyCollection>(MyCollectionD)));

let columns = [{
    title: "Agent",
    dataKey: "agent"
  },
  {
    title: "january 1st",
    dataKey: "day_0"
  },
  {
    title: "january 2nd",
    dataKey: "day_1"
  }
]

let objects = [{
  agent: "agent_1",
  day_0: {
    "code": "ABC",
    "color": "#00ff00"
  },
  day_1: {
    "code": "DEF",
    "color": "#ff0000"
  }
  // etc
}];

let doc = jsPDF()
doc.autoTable(columns, objects, {
  createdCell: function(cell, data) {
    let hex = cell.raw.color
    if (hex) {
      let rgb = hexToRgb(hex)
      cell.styles.fillColor = rgb;
      cell.text = cell.raw.code
    }
  }
});
doc.save('jhg.pdf')

function hexToRgb(hex) {
    var bigint = parseInt(hex.replace('#', ''), 16);
    var r = (bigint >> 16) & 255;
    var g = (bigint >> 8) & 255;
    var b = bigint & 255;
    return [r, g, b];
}

jspdf autoTable中的动态单元格颜色？

1 个答案: