Отображать границы только внутри таблицы autoTable-jsPDF - PullRequest
Новая
       45

Отображать границы только внутри таблицы autoTable-jsPDF

1 голос
/ 15 апреля 2020

Я пытаюсь создать таблицу, которая выглядит следующим образом:

enter image description here

Я добился чего-то похожего, но мне нужно удалить границу за пределами таблицы , Прямо сейчас я использую 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>

1 Ответ

2 голосов
/ 17 апреля 2020

Вы можете нарисовать белую рамку вокруг стола, используя этот трюк: 

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>
...