0

因此，我最近刚刚根据客户的要求在我的 pdf 创建中添加了对行跨度的支持。但它没有按预期工作。

按照示例中的代码，我添加了行跨度，它可以正常工作......在最后一列。与前几款相比没有那么多。

正如你在这个小提琴上看到的那样。

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

创建表的 json 时，我将单元格生成的行数存储在值中，用 * 分隔数量和值

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

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

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 在我生成的单元格中间呈现行线。看起来更好，但仍然不是预期的结果。这是更新的小提琴，也针对黑白着色进行了调整，并使用了最新版本的 jspdf-AutoTable

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

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

在此处输入图像描述

4

1 回答 1

0

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

最后我的问题是，仍然在跨行上绘制的行线，并lineWidth在那些单元格上设置，这raw意味着undefined那些单元格由于跨度而丢失的单元格。

因此，我只需要一种方法来识别由于我的桌子上的跨度而隐藏的单元格并将其删除lineWidth。为此，我调整了我的GetTableJSON函数，所以当我遇到一个具有display:hiddencss 的单元格时，我将它的值设置为'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 工作而做任何类似的事情

问候！

于 2017-01-23T15:19:16.537 回答