0

Hola mi problema viene así, estoy leyendo un archivo txt de una pro forma para crear la representación impresa, pero el inconveniente es que la tabla donde se desglosa las partidas en conjunto de su información de sus impuestos respectivamente básicamente seria algo así:

introducir la descripción de la imagen aquí

Entonces tuve que realizar la siguiente estructura con 2 arrays:

Array 1:

 this.seccion03_partidas_4 = [
  [
    0: "03"​​,
    1: "1"​​,
    2: "1.000"​​,
    3: "E48"​​,
    4: "SER"​​,
    5: "23153100"​​,
    6: "3101201"​​,
    7: "SERVICIOS MAZAS (SIN OT & NO PICKING)"​​,
    8: "1.00"​​,
    9: ""​​,
    10: "1.00"​​,
    11: ""​​,
    12: "02"
  ],
  [
    0: "03"​​,
    1: "1"​​,
    2: "1.000"​​,
    3: "E48"​​,
    4: "SER"​​,
    5: "23153100"​​,
    6: "3101201"​​,
    7: "SERVICIOS MAZAS (SIN OT & NO PICKING)"​​,
    8: "1.00"​​,
    9: ""​​,
    10: "1.00"​​,
    11: ""​​,
    12: "02"
  ],
  [
    0: "03"​​,
    1: "1"​​,
    2: "1.000"​​,
    3: "E48"​​,
    4: "SER"​​,
    5: "23153100"​​,
    6: "3101201"​​,
    7: "SERVICIOS"​​,
    8: "1.00"​​,
    9: ""​​,
    10: "1.00"​​,
    11: ""​​,
    12: "02"
  ],
  [
    0: "03"​​,
    1: "1"​​,
    2: "1.000"​​,
    3: "E48"​​,
    4: "SER"​​,
    5: "23153100"​​,
    6: "3101201"​​,
    7: "SERVICIOS MAZAS (SIN OT & NO PICKING)"​​,
    8: "1.00"​​,
    9: ""​​,
    10: "1.00"​​,
    11: ""​​,
    12: "02"
  ]

]

Es donde se aloja en la parte que ira de cant. unidad ...., pero aquí para seleccionar que parte del array estoy eligiendo lo hago así:

var partidas = [];
this.seccion03_partidas_4.forEach(element => {
  var temp = [
    element[2],
    element[4],
    element[6],
    element[3],
    element[5],
    element[7] + '\n' +
    '- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -' + '\n' + '\n' + '\n',
    element[8],
    element[10]
  ];
  partidas.push(temp)
});

Con lo anterior se llena la primera parte, para la parte indicada con impuesto, tasaocuota... tengo el siguiente array:

this.seccion03_IMP_partidasImpuestos_4. = [
  [
    0: "03-IMP",
    1: "TRASLADO",
    2: "1.00",
    3: "002",
    4: "Tasa",
    5: "0.160000",
    6: "0.16"
  ],
  [
    0: "03-IMP",
    1: "TRASLADO",
    2: "1.00",
    3: "002",
    4: "Tasa",
    5: "0.160000",
    6: "0.16"
  ],
  [
    0: "03-IMP",
    1: "TRASLADO",
    2: "1.00",
    3: "002",
    4: "Tasa",
    5: "0.160000",
    6: "0.16"
  ],
  [
    0: "03-IMP",
    1: "TRASLADO",
    2: "1.00",
    3: "002",
    4: "Tasa",
    5: "0.160000",
    6: "0.16"
  ]

]

Lo mismo para este array solo necesitaba traer 3 valores de todo el array, para ello lo hice así:

var impPartidas = [];

this.seccion03_IMP_partidasImpuestos_4.forEach(element => {
  var tipoImpuesto = element[3] === '002' ? 'IVA' : element[3] === '001' ? 'ISR' : element[3] === '003' ? 'IEPS' : 'NO HAY UN VALOR VALIDO EN TIPO IMPUESTOS!....';
  var temp = [
    tipoImpuesto + ' ' + element[3],
    element[5],
    element[6]
  ];
  impPartidas.push(temp)
});

Claro que funciona el verdadero detalle es que buscando como agregar esa tabla adjunta en la tabla principal lo hice de esta manera :

autoTable(doc, {
  startY: (doc as any).lastAutoTable.finalY + 10,
  head: head_tabla_productos,
  body: partidas,
  theme: 'striped',
  styles: {
    fontSize: 5,
    overflow: 'linebreak',
    cellPadding: 2,
    lineColor: [0, 0, 0],
    lineWidth: .2
  },
  headStyles: {
    valign: 'middle',
    halign: 'center',
    fillColor: [255, 255, 255],
    textColor: [0, 0, 0]
  },
  tableLineColor: [0, 0, 0],
  tableLineWidth: .2,
  columnStyles: {
    0: {
      halign: 'center'
    },
    1: {
      halign: 'center'
    },
    2: {
      halign: 'center'
    },
    3: {
      halign: 'center'
    },
    4: {
      halign: 'center'
    },
    5: {
      halign: 'left'
    },
    6: {
      halign: 'right'
    },
    7: {
      halign: 'right'
    }
  },
  alternateRowStyles: {
    fillColor: [255, 255, 255],
  },
  bodyStyles: {
    fillColor: [255, 255, 255],
    textColor: 0,
    fontSize: 5.5,
    minCellHeight: 15,
  },
  didDrawCell: function (data) {
    if (data.column.dataKey === 5 && data.cell.section === 'body') {
      let index = data.row.index;
      autoTable(doc, {
        head: [
          ['Impuestos', 'TasaOCuota', 'Importe']
        ],
        body: impPartidas[index],
        startY: data.cell.y + 6,
        margin: {
          left: data.cell.x + data.cell.padding('left')
        },
        tableWidth: 'wrap',
        theme: 'grid',
        styles: {
          fontSize: 5.5,
          cellPadding: 1
        },
        columnStyles: {
          5: {
            cellWidth: 85
          },
        },
      });

    }
  }
});

Funciona pero no imprime solamente la posición del index, ya que solo necesito que si esta en la posición 0 este imprima en la tabla solo la posición 0 del array impPartidas y asi, sucesivamente hasta llegar a rellenar posición por posición por eso mismo hice eso de que en el adjunto de didDrawCell puse:

let index = data.row.index;

y que imprima en cada posición así 

body: impPartidas[index]

Porque si en consola lo imprimo de esta manera:

console.log(index)
console.log(impPartidas[index])

Resultado:

0 
Array(3) [ "IVA 002", "0.160000", "0.16" ]
1
Array(3) [ "ISR 001", "0.160000", "0.16" ]
2
Array(3) [ "IVA 002", "0.160000", "0.16" ]
3
Array(3) [ "IEPS 003", "0.160000", "0.16" ]

Pero en el PDF se ve así:

introducir la descripción de la imagen aquí

Entonces no se cuál es el error y como solucionarlo, ya que si lo esta imprimiendo posición por index indicado, pero en el pdf se ve todo distorsionado.

Estoy utilizando las versiones: "jspdf": "^2.5.1", "jspdf-autotable": "^3.5.25"

1 respuesta 1

0

SOLUCIÓN:

De manera nativa no se pueden crear las tablas anidas, pero buscando como leer posición por posición dependiendo del index que este estaba posicionado, se puede resolver de la siguiente manera:

  1. Identificar que posición de su tabla quiere insertar su tabla anidada.
  2. Hacer uso de didDrawCell para dibujar su tabla anidada.
  3. Con un ciclo for recorrer su array correspondiente, donde contenga la cantidad de datos iguales (con respecto a la tabla padre, por así decirlo), mi ejemplo es que en la tabla padre tengo 4 registros que se colocaron/coincidan con la lectura del txt, entonces como se hace recorrido mediante el index, la tabla a anidar debe coincidir con 4 (mi caso).

El código es el siguiente:

didDrawCell: function (data) {
  if (data.column.dataKey === 5 && data.cell.section === 'body') {
    let index = data.row.index;

    for (const e of impPartidas) {
      autoTable(doc, {
        head: [
          ['Impuestos', 'TasaOCuota', 'Importe']
        ],
        body: [
          [impPartidas[index][0], impPartidas[index][1], impPartidas[index][2]]
        ],
        startY: data.cell.y + 6,
        margin: {
          left: data.cell.x + data.cell.padding('left')
        },
        tableWidth: 'wrap',
        theme: 'grid',
        styles: {
          fontSize: 5.5,
          cellPadding: 1
        },
        columnStyles: Options3,
      })
    }
  }
}

y queda la representación en el pdf de la siguiente manera :

introducir la descripción de la imagen aquí

¡Espero que les sirva de ayuda a ustedes!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.