首页 文章

在pdf创建时出现rowspan问题

提问于
浏览 次
0

所以，我刚刚根据客户的要求在我的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() 
    : '';

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

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

有任何想法吗？？？

编辑

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

以前，我在行结尾处丢失了单元格，其中单元格生成了行

Missing cells on spawned rows

所以，而不是忽略那些我们将 raw 值设置为空字符串的单元格

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

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

Complete grids

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

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

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

enter image description here

javascript pdf jspdf jspdf-autotable

1 回答

  • 0

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

    最后我的问题是，在行跨越的行上仍然被绘制的行行，并且在这些单元格上设置 lineWidth ，这意味着由于 Span 而缺少单元格的那些单元格 .

    所以，我只需要一种方法来识别由于我的 table 上的 Span 而隐藏的单元格并删除它的 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;
      }
    }

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

    Printer friendly version

    在此期间，这对我有用，但不知何故，我认为我不需要这样做才能让它工作，因为这个例子没有显示做任何喜欢的东西，以使rowpan和colspan工作

    问候！

    回复于

相关问题