मैं एक टेबल बनाने की कोशिश कर रहा हूं जो इस तरह दिखता है:

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
cplaiuu 15 अप्रैल 2020, 17:45

1 उत्तर

सबसे बढ़िया उत्तर

आप इस ट्रिक का उपयोग करके टेबल के चारों ओर एक सफेद बॉर्डर बना सकते हैं:

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>
2
Mohamed Gharib 17 अप्रैल 2020, 10:22