javascript - 仅在表格内部显示边框 autoTable-jsPDF-6ren

javascript - 仅在表格内部显示边框 autoTable-jsPDF

转载作者：行者123 更新时间：2023-12-03 08:46:36

我正在尝试创建一个如下所示的表格:

我已经实现了类似的目标，但我需要删除表格之外的边框。现在我使用 lineWidth: 0.2, lineColor: [73, 138, 159] 来创建边框，但这不是我需要的。我检查了 autoTable-jsPDF 的所有文档，但找不到类似的内容。

有人可以帮我吗？谢谢。

function doPDF() {
  var doc = new jsPDF("p", "mm", "a4", true);
  var totalPaginas = "{total_pages_count_string}";
  var pagActual = 0;  

  doc.autoTable({
    startY: 40,
    head: [
      [
        {
          content: "",
          colSpan: 5,
          styles: { halign: "center", fillColor: [43, 130, 158] }
        }
      ]
    ],
    body: [
      [
        {
          content: "TÍTULO",
          colSpan: 1,
          styles: {
            valign: "middle",
            fillColor: [244, 247, 249],
            fontStyle: "bold"
          }
        },
        { content: "TÍTULO", colSpan: 4, styles: { valign: "middle" } }
      ],
      [
        {
          content: "ESTRATÉGIA DIDÁCTICA",
          colSpan: 1,
          styles: {
            valign: "middle",
            fillColor: [244, 247, 249],
            fontStyle: "bold"
          }
        },
        {
          content: "ESTRATÉGIA DIDÁCTICA",
          colSpan: 4,
          styles: { valign: "middle" }
        }
      ],
      [
        {
          content: "OBJETIVOS",
          colSpan: 1,
          styles: {
            valign: "middle",
            fillColor: [244, 247, 249],
            fontStyle: "bold"
          }
        },
        { content: "OBJETIVOS", colSpan: 4, styles: { valign: "middle" } }
      ],
      [
        {
          content: "ESPACIO",
          styles: {
            valign: "middle",
            halign: "center",
            fillColor: [244, 247, 249],
            fontStyle: "bold"
          }
        },
        {
          content: "TIEMPO",
          styles: {
            valign: "middle",
            halign: "center",
            fillColor: [244, 247, 249],
            fontStyle: "bold"
          }
        },
        {
          content: "DINÁMICA",
          styles: {
            valign: "middle",
            halign: "center",
            fillColor: [244, 247, 249],
            fontStyle: "bold"
          }
        },
        {
          content: "SITUACIÓN DE JUEGO",
          styles: {
            valign: "middle",
            halign: "center",
            fillColor: [244, 247, 249],
            fontStyle: "bold"
          }
        },
        {
          content: "COORDINACIÓN",
          styles: {
            valign: "middle",
            halign: "center",
            fillColor: [244, 247, 249],
            fontStyle: "bold"
          }
        }
      ],
      [
        { content: "text", styles: { valign: "middle", halign: "center" } },
        { content: "text", styles: { valign: "middle", halign: "center" } },
        { content: "text", styles: { valign: "middle", halign: "center" } },
        { content: "text", styles: { valign: "middle", halign: "center" } },
        { content: "text", styles: { valign: "middle", halign: "center" } }
      ],
      [{ content: "", colSpan: 5 }]
    ],
    columnStyles: {
      0: { cellWidth: 40 }
    },
    bodyStyles: {
      lineWidth: 0.2,
      lineColor: [73, 138, 159]
    },
    theme: "plain"
  });

  var primera_tabla = doc.lastAutoTable.finalY;

  doc.autoTable({
    head: [
      [
        {
          content: "ACCIÓN TÉCNICA / COORDINATIVA",
          styles: { halign: "center", fillColor: [244, 247, 249] }
        },
        {
          content: "INTENCIÓN TÁCTICA / PRINCIPIO COLECTIVO",
          styles: { halign: "center", fillColor: [244, 247, 249] }
        }
      ]
    ],
    styles: {
      lineColor: [73, 138, 159],
      lineWidth: 0.2
    },
    theme: "plain",
    startY: primera_tabla
  });

  if (typeof doc.putTotalPages === "function") {
    doc.putTotalPages(totalPaginas);
  }

  doc.save("pdf.pdf");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

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

<button onclick="doPDF()">Do</button>

最佳答案

您可以使用以下技巧在 table 周围绘制白色边框:

doc.autoTable({
  // ...
  tableLineColor: [255, 255, 255],
  tableLineWidth: 1,
})

function doPDF() {
  var doc = new jsPDF("p", "mm", "a4", true);
  var totalPaginas = "{total_pages_count_string}";
  var pagActual = 0;  

  doc.autoTable({
    startY: 40,
    head: [
      [
        {
          content: "",
          colSpan: 5,
          styles: { halign: "center", fillColor: [43, 130, 158] }
        }
      ]
    ],
    body: [
      [
        {
          content: "TÍTULO",
          colSpan: 1,
          styles: {
            valign: "middle",
            fillColor: [244, 247, 249],
            fontStyle: "bold"
          }
        },
        { content: "TÍTULO", colSpan: 4, styles: { valign: "middle" } }
      ],
      [
        {
          content: "ESTRATÉGIA DIDÁCTICA",
          colSpan: 1,
          styles: {
            valign: "middle",
            fillColor: [244, 247, 249],
            fontStyle: "bold"
          }
        },
        {
          content: "ESTRATÉGIA DIDÁCTICA",
          colSpan: 4,
          styles: { valign: "middle" }
        }
      ],
      [
        {
          content: "OBJETIVOS",
          colSpan: 1,
          styles: {
            valign: "middle",
            fillColor: [244, 247, 249],
            fontStyle: "bold"
          }
        },
        { content: "OBJETIVOS", colSpan: 4, styles: { valign: "middle" } }
      ],
      [
        {
          content: "ESPACIO",
          styles: {
            valign: "middle",
            halign: "center",
            fillColor: [244, 247, 249],
            fontStyle: "bold"
          }
        },
        {
          content: "TIEMPO",
          styles: {
            valign: "middle",
            halign: "center",
            fillColor: [244, 247, 249],
            fontStyle: "bold"
          }
        },
        {
          content: "DINÁMICA",
          styles: {
            valign: "middle",
            halign: "center",
            fillColor: [244, 247, 249],
            fontStyle: "bold"
          }
        },
        {
          content: "SITUACIÓN DE JUEGO",
          styles: {
            valign: "middle",
            halign: "center",
            fillColor: [244, 247, 249],
            fontStyle: "bold"
          }
        },
        {
          content: "COORDINACIÓN",
          styles: {
            valign: "middle",
            halign: "center",
            fillColor: [244, 247, 249],
            fontStyle: "bold"
          }
        }
      ],
      [
        { content: "text", styles: { valign: "middle", halign: "center" } },
        { content: "text", styles: { valign: "middle", halign: "center" } },
        { content: "text", styles: { valign: "middle", halign: "center" } },
        { content: "text", styles: { valign: "middle", halign: "center" } },
        { content: "text", styles: { valign: "middle", halign: "center" } }
      ],
      [{ content: "", colSpan: 5 }]
    ],
    columnStyles: {
      0: { cellWidth: 40 }
    },
    bodyStyles: {
      lineWidth: 0.2,
      lineColor: [73, 138, 159]
    },
    theme: "plain",
    tableLineColor: [255, 255, 255],
    tableLineWidth: 1,
  });

  var primera_tabla = doc.lastAutoTable.finalY;

  doc.autoTable({
    head: [
      [
        {
          content: "ACCIÓN TÉCNICA / COORDINATIVA",
          styles: { halign: "center", fillColor: [244, 247, 249] }
        },
        {
          content: "INTENCIÓN TÁCTICA / PRINCIPIO COLECTIVO",
          styles: { halign: "center", fillColor: [244, 247, 249] }
        }
      ]
    ],
    styles: {
      lineColor: [73, 138, 159],
      lineWidth: 0.2
    },
    theme: "plain",
    startY: primera_tabla
  });

  if (typeof doc.putTotalPages === "function") {
    doc.putTotalPages(totalPaginas);
  }

  doc.save("pdf.pdf");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

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

<button onclick="doPDF()">Do</button>

关于javascript - 仅在表格内部显示边框 autoTable-jsPDF，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61231635/

文章推荐： javascript - 在 ES6 Node.js 中，如何让一个类随处可用？

文章推荐： performance - Spark 函数与 UDF 性能？

文章推荐： javascript - 如何判断代码是否在try catch block 下

文章推荐： TensorFlow:关于 tf.argmax() 和 tf.equal() 的问题

jspdf - 如何使用 jspdf、jspdf-autotable 适应宽表
我正在使用带有插件 jspdf-autotable 的 jspdf 来为一个非常宽的表格创建一个 pdf，有没有办法让表格/列数据自动适应任何页面大小？我尝试了下面的代码溢出:'linebreak'
jspdf - jspdf autotable中每列的宽度不同？
我的表有 13 列。如何为每列获得不同的宽度？我可以像这样给每个列宽吗？样式:{溢出:'换行符'，列宽:[100,80,80,70,80,80,70,70,70,70,60,80,100]}，我的
jspdf - 使用 jspdf 和 jspdf-autotable 在 pdf 中嵌套表格
如何使用jspdf和jspadf-autotable在PDF中实现嵌套表格？类似于下图的内容: 最佳答案 jspdf-autotable 中不支持嵌套表格，但您可以使用 didDrawCell Hoo
jspdf - 如何删除 jsPDF 中的单元格填充？
在 jsPDF 中使用 .cell 时如何删除填充？我到处都看了，文档很模糊 this.pdf = new jsPDF(); this.pdf.cell(0, 0, 10, 10, "cell ce
jspdf - 如何制作 jspdf 自动表格？
表格插件 JsPDF-AutoTable: https://github.com/simonbengtsson/jsPDF-AutoTable 如何使页面横向与纵向相反？在文档中，它只是说“仅支持 p
jspdf - 如何在 JsPDF 中添加超链接？
是否可以添加 HyperLink在 jsPDF ? 这是我用于相同的代码。 var doc = new jsPDF('p', 'pt'); doc.fromHTML( 'Cl
jspdf - 在表格前后添加内容(jsPDF autotable)
我对 jsPDF autotable 有疑问。我的代码: $('#printBtn').on('click', function() { var pdf = new jsPDF('p
jspdf - 如何使用 jspdf/autotable 在最后一页显示表页脚？
我有自动表的问题。我的表由 thead、tbody 和 tfoot 组成。我的脚是我在每一列上的总值(value)。我能够生成 pdf，但 tfoot 或总页脚不断打印在每一页上。我在检查文档时使用
jspdf-autotable - jspdf-autotable 插件的自定义字体
有人可以帮忙举一个为 jspdf-autotable 设置自定义字体的例子吗？我尝试了以下 var doc = new jsPDF('p', 'pt'); doc.setFont("rotobo")
jspdf - 如何使用 jsPDF 获取 PDF 中的表格行图像？
我有一个带图像的 html 表。当我尝试转换为 PDF 时，只有数据来了。图像未以 PDF 格式显示。如何获取pdf格式的表格td图片？契约(Contract)标题包含复选框图像。但不是以 pdf
jspdf - 生成的 PDF 中的自动换行(使用 jsPDF)？
我正在做的是使用 jsPDF 创建我生成的图形的 PDF。但是，我不确定如何包装标题(使用 text() 函数添加)。标题的长度因图形而异。目前，我的标题正在页面外运行。任何帮助，将不胜感激! 这是我
javascript - jsPDF && jsPDF AutoTable 将特殊字符打印到 PDF
我正在使用img jsPDF AutoTable库从我的HTML表创建PDF文件，Everythink工作正常，PDF总是创建，但我对我的国家/地区典型的一些特殊字符有疑问。在我的 PDF 文件中，包
jspdf - 如何使用 JsPDF-autoTable 在每个页面的顶部添加 Logo ？
JsPdf-autoTable是一款非常棒的软件，并且非常简单就能让基础功能发挥作用。现在我想在每个页面的顶部添加一个 Logo 和一些文本，并在每个页面上添加一个 page X of Y 页脚，但
javascript - jsPDF 总是在控制台上返回 jsPDF PubSub 错误
我有一个用于保存 html 页面的按钮。当用户单击按钮时，我想触发 jsPDF 函数，但它返回“jspdf PubSub 错误”并且生成的 pdf 文件为空白。 var doc = new jsPD
jspdf - 如何为 jsPDF 应用颜色、表格 CSS 等样式？
我是使用 jsPDF 的新手，能够很好地生成普通 PDF，但是当我尝试应用外部 CSS 或普通样式背景颜色时，它没有任何效果。我的 JSP 包括: 我正在使用下
jspdf - putTotalPages 在 jspdf-autotable header 中不起作用
我正在尝试将“页码 x of y”添加到使用 jspdf 和 jspdf-autotable 生成的 PDF 中。我使用了 jspdf-autotable 示例网站上的 Examples.js 文件中
javascript - jsPDF/jsPDF-autotable 将 dom 元素打印到表格中
我正在使用jspdf和jspdf-autotable将基于数据的表格导出为PDF。有时，我的数据可能包含 DOM 元素，这些元素不由 jspdf-autotable 插件处理。在大多数情况下，DOM
jspdf - 在 jspdf autotable 插件中访问嵌套的 JSON 属性
我刚刚开始使用 jsPDF 和 AutoTable 插件，它几乎完美地满足了我们的使用需求。一个问题... 是否可以将列定义中的 dataKey 分配给映射到表的 JSON 中的嵌套属性？我们有一个
jspdf - 在 jspdf autotable 插件中访问嵌套的 JSON 属性
我刚刚开始使用 jsPDF 和 AutoTable 插件，它几乎完美地满足了我们的使用需求。一个问题... 是否可以将列定义中的 dataKey 分配给映射到表的 JSON 中的嵌套属性？我们有一个
javascript - JsPdf autotable 中单元格内的粗体和普通文本样式(如何使用 jsautotable jspdf 使用粗体和普通文本)
我使用 Array.prototype.push() 创建了一个包含来自动态表的值的数组.然后像这样把它转换成pdf doc.autoTable(vHeader, vData, opt); doc.s

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 仅在表格内部显示边框 autoTable-jsPDF