Question

所以，我刚刚根据客户的要求在我的pdf创建中添加了对rowspan的支持。但它没有按预期工作。

按照example上的代码添加了rowspan，它在最后一列上正常工作....与以前的不同。

正如您在此fiddle上看到的那样。

关于它是如何工作的一点解释......或者我打算让它发挥作用。

当创建表的json时，我在值中存储单元格产生的行数，用*分隔金额和值

var val = cell
    ? cell.hasChildNodes() && cell.childNodes[0].tagName !== undefined
    ? cell.childNodes[0].textContent + (cell.getAttribute("rowSpan") ? "*" + cell.getAttribute("rowSpan") : '')
    : cell.textContent.trim() 
    : '';

在drawCell钩子上渲染pdf时，我会检查该值是否包含*，因此我知道它是一个产生行的单元格，所以我对split进行了检查value并获取它跨越的行数和应该出现的值，创建具有正确大小和位置的表格单元格

drawCell: 
       function (cell, data) {
            if (cell.raw === undefined)
                return false;
            if(cell.raw.indexOf("*") > -1) {
                var text = cell.raw.split("*")[0];
                var times = parseInt(cell.raw.split("*")[1]);
                doc.rect(cell.x, cell.y, cell.width, cell.height * times, 'DF');
                doc.autoTableText(text, cell.x + cell.width / 2, cell.y + cell.height * times / 2, {
                    halign: 'center',
                    valign: 'middle'
                });
                return false;
            }
        }

任何想法???

修改

我只是调整了一点小提琴，我得到了可观的结果

以前，我在行结尾处缺少单元格，其中单元格产生了行

因此，我没有忽略由于行生成而隐藏的那些单元格，而是将它们的raw值设置为空字符串

if (cell.raw === undefined)
        cell.raw = '';

现在，我正在获得完整的网格

但是，再一次，pdf在我生成的单元格中间呈现行线。看起来更好，但仍然不是理想的结果。 Here's the updated fiddle，也调整为黑白着色并使用最新版本的jspdf-AutoTable

我已经将单元格边框宽度设置为0，但由于某种原因，调整后的宽度是行尾的单元格

 if (cell.raw === undefined) {
    cell.raw = '';
    cell.styles.lineWidth = 0;
  }

Answer 1

所以，经过深思熟虑之后，我只是自己找到了一个答案，不是很漂亮，但它正在我需要的时候工作

我最后的问题是，行上的行仍在被绘制的行上，并在lineWidth为raw的那些单元格上设置undefined，表示单元格所在的行由于跨度而丢失。

所以，我只需要一种方法来识别由于我桌子上的跨度而隐藏的单元格并将其删除lineWidth。为此，我调整了GetTableJSON函数，以便在遇到具有display:hidden css的单元格时，我将其值设置为'hidden'

for (var i = 1; i < tableElem.rows.length; i++) {
    var tableRow = tableElem.rows[i];
    var style = window.getComputedStyle(tableRow);
    if (includeHiddenElements || style.display !== 'none') {
      var rowData = [];
      for (var j in Object.keys(columns)) {
        var cell = tableRow.cells[j];
        style = window.getComputedStyle(cell);
        var val;
        if (style.display !== 'none') {
          val = cell ? cell.hasChildNodes() && cell.childNodes[0].tagName !== undefined ? cell.childNodes[0].textContent + (cell.getAttribute("rowSpan") ? "*" + cell.getAttribute("rowSpan") : '') : cell.textContent.trim() : '';
          cellsStyle[(i - 1) + "-" + j] = cell ? cell.hasChildNodes() && cell.childNodes[0].tagName !== undefined ? AdjustStyleProperties(window.getComputedStyle(cell.childNodes[0])) : AdjustStyleProperties(window.getComputedStyle(cell)) : {};
        } else {
            val = 'hidden'; 
        }
        rowData.push(val);
      }
      rows.push(rowData);
    }

绘制单元格时，只需将lineWidth设置为0并返回false以便不写入值

drawCell: function(cell, data) {
      if (cell.raw === undefined)
        return false;
        if (cell.raw === 'hidden') {
        cell.styles.lineWidth = 0;
        return false;
      }
      if (cell.raw.indexOf("*") > -1) {
        debugger;
        var text = cell.raw.split("*")[0];
        console.log(text);
        var times = parseInt(cell.raw.split("*")[1]);
        doc.rect(cell.x, cell.y, cell.width, cell.height * times, 'DF');
        doc.autoTableText(text, cell.x + cell.width / 2, cell.y + cell.height / 2 * times, {
          halign: 'center',
          valign: 'middle'
        });
        return false;
      }
    }

这给了我期待的结果，颜色和打印机友好

与此同时，这对我有用，但不知何故，我不认为我需要这样做才能让它正常工作，因为这个例子没有显示任何喜欢的东西按顺序使rowspan和colspan工作

问候！

在pdf创建时出现rowspan问题

1 个答案: