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-autotable - jspdf-autotable 插件的自定义字体
有人可以帮忙举一个为 jspdf-autotable 设置自定义字体的例子吗？我尝试了以下 var doc = new jsPDF('p', 'pt'); doc.setFont("rotobo")
javascript - jsPDF AutoTable - autoTable 不是函数
我在 Angular 应用程序上使用 JSPdf，我正在尝试使用 JS 自动表插件，但我遇到了 JS 错误 EXCEPTION: Uncaught (in promise): TypeError: d
jsPDF Autotable 更改负值的单元格颜色
我正在使用 jsPDF Autotable 从 HTML 表格生成 PDF。 TD 元素包含一个用变量填充单元格的 ID。一切正常，但我想将负值的 textColor 设置为红色。我找不到如何实现此目
jspdf - 在表格前后添加内容(jsPDF autotable)
我对 jsPDF autotable 有疑问。我的代码: $('#printBtn').on('click', function() { var pdf = new jsPDF('p
javascript - 仅在表格内部显示边框 autoTable-jsPDF
我正在尝试创建一个如下所示的表格: 我已经实现了类似的目标，但我需要删除表格之外的边框。现在我使用 lineWidth: 0.2, lineColor: [73, 138, 159] 来创建边框，但这
javascript - jsPDF Autotable 在每个表格上方添加标题
我正在使用 jsPDF Autotable 生成包含多个表格的 pdf 文档。函数生成(){ var doc = new jsPDF('l', 'pt', 'a3'); var res = do
javascript - 如何单独获取对象值并将其插入临时变量 - jsPDF-autoTable
下面是我从后端获得的示例响应。 let data = [ { "thisIsTheResponseFromBackEnd": [ { "Col Header 1": "
javascript - JSPDF Autotable 断行
在网络应用程序中，我使用 JSPDF Autotable 来构建 PDF。问题是数据将是动态的(我将使用 AngularJS 1.x)，因此行可以有不同的高度。在某些情况下，Autotable 会打
javascript - JSPDF AUTOTABLE 不显示正确的表格边框
我想用 JSPDF 导出 PDF，我使用插件作为“jspdf.autotable”来创建表格。现在的问题是我想要如下格式样式: 如您所见，表格外有一个边框，但标题部分没有，我已经实现了，但是当行超过页
javascript - jsPdf autotable 中未捕获的类型错误
我正在尝试使用 jsPdf Auto-table 将动态数据打印到 pdf 文件中。当我这样做时，我遇到了某种错误，例如 The headers should be an object or arra
javascript - jsPDF 类型不存在属性 'autoTable'
我正在使用 angular2 和 Node JS。我已经安装了jspdf和 jspdf-autotable两个模块都使用 npm。在 angular-cli.json 文件中，我嵌入了脚本: "scr
jspdf - 如何使用 jspdf/autotable 在最后一页显示表页脚？
我有自动表的问题。我的表由 thead、tbody 和 tfoot 组成。我的脚是我在每一列上的总值(value)。我能够生成 pdf，但 tfoot 或总页脚不断打印在每一页上。我在检查文档时使用
JSPDF-Autotable colspan/rowpan 问题
我有一个带有 rowspan/colspan 的 html 表格。我正在使用 jspdf 和 jspdf-autotable 将该 html 表格导出为 pdf。但是，保存的 pdf 有一个表，该表在
javascript - 在 jsPdf AutoTable 中尝试动态数据时遇到问题
我尝试使用 jsPdf AutoTable 将动态数据打印到 PDF 中。但我未能做到这一点。我搜索了很多网站，但没有人提到将动态数据放入 Row 中。所以我的问题是，有没有什么方法可以将动态数据放入
javascript - 如何使用 jspdf-autotable 打印四个不同的表格
我想使用 jspdf autotable 插件将这两个表打印为 pdf。但我编写的脚本仅打印第二个表。我认为问题出在剧本的编写上。有人会指导我如何使用 jspdf-autotable 打印这两个表格吗
javascript - 如何使用 jspdf-Autotable 在表格中添加自定义最后一行
我正在尝试使用 jspdf 和 jspdf-Autotable 构建一个小型应用程序，但我不知道如何使用另一个变量值创建自定义最后一行现有的表。到目前为止我所做的是: doc.autoTable
javascript - jsPDF autoTable columnWidth 包装切断表格
我正在使用 jsPDF 从 HTML 表格生成 PDF 并且 jsPDF 很棒，预计我遇到一个问题，当我尝试包装 columnWidth 时，我的表格被切断了:( var doc = new jsPD
javascript - JSPDF 和 AutoTable 的问题
我正在尝试将“HTML 中的表格”与“页眉”结合起来...查看示例。我可以让每个人单独工作，但不能一起工作。当我将两者结合起来时，我遇到了问题......你能看出我在这里做错了什么吗？为什么这不起作
javascript - 排除 jsPDF AutoTable 中的列
有人使用 jsPDF autoTable 从 Table 中排除 pdf 结果中的列的经验..Would appriciate 一点帮助。最佳答案无论如何，在深入研究 API 和示例之后。我找到了
javascript - JSPDF 和 AutoTable 的标题行问题
我正在尝试使用 JSPDF 和 AutoTable 从 html 表格生成 PDF 文件。在我的示例中，有一个带有两个标题行的 html 表格，如下所示: ID

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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