0

esta es una lista de facturas en una vista de Razor. Estoy tratando de crear un salto de página por cada factura. Estaba buscando preguntas anteriores pero nada funciona para mí. No sé qué más puedo hacer.

Podría hacerlo con javascript o jquery si fuera necesario

Si alguien tiene una solución o ayuda, lo agradeceré mucho. Gracias

.page-break {
        page-break-after: always; /* depreciating, use break-after */
        break-after: page;
        width:100%;
        height: 0px;
        page-break-inside: avoid;
        display: block !important;
    }
<div class="print-area">
        @foreach (var invoice in Model)
        {
            <div class="row bg-white pt-5 px-5 text-black">
                <div class="col-md-12 mt-3 p-0">
                    <table class="receipt-item-list">
                        <tr style="border-bottom: 2px solid;">
                            <th class="text-uppercase"></th>
                            <th class="text-uppercase">@NAVIGIAMVC.Resources.Language.Article</th>
                            <th class="text-uppercase">@NAVIGIAMVC.Resources.Language.Price</th>
                            <th class="text-uppercase">Total</th>
                        </tr>
                        @foreach (var item in Model.Items)
                        {
                            <tr>
                                <td>@Convert.ToInt32(item.Quantity)</td>
                                <td class="font-weight-bold text-uppercase">
                                    @item.ItemName @item.ItemDescription
                                </td>
                                <td>[email protected](item.Amount)</td>
                                <td>
                                   [email protected](item.Amount * item.Quantity) 
                                </td>
                            </tr>
                            foreach (var nItem in invoice.InvoiceItems.Where(x => x.ItemRef.ToLower() == 
                            "article"))
                            {
                                if (nItem.NestTo == item.NestTo)
                                {
                                    <tr>
                                        <td>@Convert.ToInt32(nItem.Quantity)</td>
                                        <td>↑ @nItem.ItemName @nItem.ItemDescription</td>
                                        <td>[email protected](nItem.Amount)</td>
                                        <td>
                                          [email protected](nItem.Amount * nItem.Quantity)
                                        </td>
                                    </tr>
                                }
                            }
                        }
                        <tr style="border-top: 2px solid">
                            <td colspan="2"></td>
                            <td class="text-right font-weight-bold">SUBTOTAL</td>
                            <td>[email protected](invoice.SubTotal)</td>
                        </tr>
                        <tr>
                            <td colspan="3" class="text-right font-weight-bold text-uppercase">@NAVIGIAMVC.Resources.Language.Discounts</td>
                            <td>@invoice.DiscountTotal</td>
                        </tr>
                        <tr>
                            <td colspan="3" class="text-right font-weight-bold text-uppercase">@NAVIGIAMVC.Resources.Language.Taxes</td>
                            <td>[email protected](invoice.TaxTotal)</td>
                        </tr>
                        <tr style="border-top: 2px solid; border-bottom: 2px solid" class="font-14pt">
                            <td colspan="3" class="text-right font-weight-bold text-uppercase">TOTAL</td>
                            <td class="font-weight-bold">[email protected](invoice.Total)</td>
                        </tr>
                        <tr>
                            <td colspan="3" class="text-right font-weight-bold text-uppercase">@NAVIGIAMVC.Resources.Language.TotalPaid</td>
                            <td class="font-weight-bold font-14pt">$@(ViewBag.AmountPaid != null ? NAVIGIAMVC.Utils.GlobalHelper.Money(ViewBag.AmountPaid) : 0)</td>
                        </tr>
                        <tr>
                            <td colspan="3" class="text-right font-weight-bold text-uppercase">@NAVIGIAMVC.Resources.Language.DueBalance</td>
                            <td class="font-weight-bold font-14pt">$@(ViewBag.DueBalance != null ? NAVIGIAMVC.Utils.GlobalHelper.Money(ViewBag.DueBalance) : 0)</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="page-break"></div>
        }
    </div>

introducir la descripción de la imagen aquí

6
  • No entendi podrias explicar nuevamente y tal vez con una imagen agregada. Commented el 6 feb. 2020 a las 22:58
  • @MiguelZarate quiero imprimir una lista de facturas una factura por cada pagina. pero una sola factura no ocupa una hoja completa. Es por eso que quiero forzar un salto de pagina Commented el 6 feb. 2020 a las 23:16
  • Pero tu codigo es html no es pdf, puedes hacer dos cosas desde servidor convertirlo en pdf y mostrarlo o por cada tabla html que tengas lo transformes a pdf cada vez que el usuario lo descargue. Commented el 7 feb. 2020 a las 16:35
  • @MiguelZarate Es un listado. Ejemplo: tengo un contenedor que contiene 50 facturas. lo que se quiere es poder imprimir el contenedor completo las 50 facturas visualizarlas y luego imprimirlas una por pagina. Commented el 7 feb. 2020 a las 16:39
  • 50 paginas visualizadas de un solo momento puede ser muy pesado, podrias visualizar en una tabla los 50 elementos pero presentando el titulo o fecha y darles la opcion a los usuarios de ver detalle o mostrar en pdf y de alli que ellos decidan si imprimirlas. Commented el 7 feb. 2020 a las 16:50

1 respuesta 1

0

Pues puedes usar la libreria jspdf-autotable, en html para mostrar una linea usa <--< hr>--> tag hr

He aqui un ejemplo, en html y javascript //librerias necesarias jspdf y jspdf-autotable

//documentacion del plugin //https://github.com/simonbengtsson/jsPDF-AutoTable

function generate() {

  var doc = new jsPDF('p', 'pt');

  var res = doc.autoTableHtmlToJson(document.getElementById('basic-table1'));
  doc.autoTable(res.columns, res.data, {margin: {top: 80}});

    var res2 = doc.autoTableHtmlToJson(document.getElementById('basic-table2'));
 
  var header = function(data) {
    doc.setFontSize(18);
    doc.setTextColor(40);
    doc.setFontStyle('normal');
    //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
    doc.text("Testing Report", data.settings.margin.left, 50);
  };

  var options = {
    beforePageContent: header,
    margin: {
      top: 80
    },
    startY: doc.autoTableEndPosY() + 20
  };
   var options2={
            pageBreak: 'always',
            tableWidth: 'auto'}

  doc.addPage(); 
  doc.autoTable(res2.columns, res2.data, options);

  doc.save("table.pdf");
}
<script src="https://cdn.rawgit.com/simonbengtsson/jsPDF/requirejs-fix-dist/dist/jspdf.debug.js"></script>
<script src="https://github.com/simonbengtsson/jsPDF-AutoTable/blob/master/dist/jspdf.plugin.autotable.js"></script>
<button onclick="generate()">Generate PDF</button>

<table id="basic-table1" style="display: block;">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
      <th>Email</th>
      <th>Country</th>
      <th>IP-address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="right">1</td>
      <td>Donna</td>
      <td>Moore</td>
      <td>[email protected]</td>
      <td>China</td>
      <td>211.56.242.221</td>
    </tr>
    <tr>
      <td align="right">2</td>
      <td>Janice</td>
      <td>Henry</td>
      <td>[email protected]</td>
      <td>Ukraine</td>
      <td>38.36.7.199</td>
    </tr>
    <tr>
      <td align="right">3</td>
      <td>Ruth</td>
      <td>Wells</td>
      <td>[email protected]</td>
      <td>Trinidad and Tobago</td>
      <td>19.162.133.184</td>
    </tr>
    <tr>
      <td align="right">4</td>
      <td>Jason</td>
      <td>Ray</td>
      <td>[email protected]</td>
      <td>Brazil</td>
      <td>10.68.11.42</td>
    </tr>
    <tr>
      <td align="right">5</td>
      <td>Jane</td>
      <td>Stephens</td>
      <td>[email protected]</td>
      <td>United States</td>
      <td>47.32.129.71</td>
    </tr>
    <tr>
      <td align="right">6</td>
      <td>Adam</td>
      <td>Nichols</td>
      <td>[email protected]</td>
      <td>Canada</td>
      <td>18.186.38.37</td>
    </tr>
  </tbody>
</table>

<br/>
<hr>
<table id="basic-table2" style="display: block;">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
      <th>Email</th>
      <th>Country</th>
      <th>IP-address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="right">1</td>
      <td>Jane</td>
      <td>Doe</td>
      <td>[email protected]</td>
      <td>KY</td>
      <td>154.56.242.221</td>
    </tr>
    <tr>
      <td align="right">2</td>
      <td>John</td>
      <td>Henry</td>
      <td>[email protected]</td>
      <td>Mexico</td>
      <td>38.36.7.199</td>
    </tr>
    <tr>
      <td align="right">3</td>
      <td>Raymon</td>
      <td>Williams</td>
      <td>[email protected]</td>
      <td>Trinidad and Tobago</td>
      <td>19.162.133.184</td>
    </tr>
    <tr>
      <td align="right">4</td>
      <td>Jason</td>
      <td>Ray</td>
      <td>[email protected]</td>
      <td>Brazil</td>
      <td>10.68.11.42</td>
    </tr>
    <tr>
      <td align="right">5</td>
      <td>Jane</td>
      <td>Stephens</td>
      <td>[email protected]</td>
      <td>United States</td>
      <td>47.32.129.71</td>
    </tr>
    <tr>
      <td align="right">6</td>
      <td>Adam</td>
      <td>Nichols</td>
      <td>[email protected]</td>
      <td>Canada</td>
      <td>18.186.38.37</td>
    </tr>
  </tbody>
</table>

En este sitio no quiere ejectuar bien pero la salida es la siguiente:

introducir la descripción de la imagen aquí

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.