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

【问题标题】：Dynamic cell color in jspdf autoTable?jspdf autoTable中的动态单元格颜色？
【发布时间】：2018-08-13 20:54:47
【问题描述】：

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

对象的 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 可以提供任何帮助吗？

【问题讨论】：

可以，但您必须设置实际颜色而不是“day_0.color”，例如红色的 [255, 0, 0]。
感谢@Simon Bengtsson 的回答。我明白了，应该是cell.styles.fillColor = "#0062cc";。但问题是每个单元格的颜色可能不同。那么如何使用相应的属性动态设置呢？
这样的？ if (typeof cell.raw === 'number') { cell.styles.fillColor = [255, 0, 0] }。我想我遗漏了什么，你能详细说明一下吗？
表格中的每个单元格对应一个“day”对象。对象的属性之一是颜色代码（例如“#a09494b2”），它对应于应用于单元格的颜色。但是从一个 pdf 到另一个，打印的日期会有所不同，适用于每个单元格的颜色也会有所不同。所以我不能在代码中放入像“[255,0,0]”这样的直接值，因为它可能会改变。我需要指出属性的值。现在清楚了吗？
啊哈，那么您要问的是如何将十六进制颜色转换为 rgb 值？ stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb 可以这样使用：cell.styles.fillColor = hexToRgb(cell.raw)

标签： jspdf jspdf-autotable

【解决方案1】：

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

根据我们对 cmets 的讨论，我想我理解了您的问题。您可以尝试这样的事情（使用来自here 的 hexToRgb 函数）

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];
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.4/jspdf.plugin.autotable.js"></script>

【讨论】：

代理打印正常，但在白天的单元格中，我打印的是“[object Object]”而不是代码（“ABC”）。而且颜色也不打印。我只尝试了代码，但结果相同。是不是因为 day 是一个有两个属性的嵌套对象？
奇怪，它对我有用。添加了上面的 hexToRgb 以便您现在可以运行它。
经过多次测试，我仍然无法使其工作。代码 sn-p 在这里运行时有效，我在代码中完全复制了它，但我仍然有 [object Object]。当我单独运行 HexToRgb 方法时，它也可以正常工作。它似乎无法识别 cell.raw.color 和 cell.raw.text。也许它来自项目的结构。我正在使用 typescript 和 angular 6。会是这个原因吗？
嗯，不应该。您使用的是哪个版本的 jspdf 和 jspdf-autotable 的哪个版本？
当我切换到 jspdf-autotable 的 2.3.4 版本时它工作了。非常感谢您的帮助西蒙！ :-)