Yo uso jsPdf para crear pdf a partir de html. ¿Cómo puedo agregar margings (arriba, izquierda, derecha) a mi página pdf?

     var doc = new jsPDF('p', 'pt', 'letter');
    doc.addHTML($('#template_invoice')[0], function () {
        ...
    });

Gracias por la ayuda!

InformationsquelleAutor Ololo Ololo | 2017-09-02

1 Comentario

  1. 2

    JSPdf permite hacer un margen de hash y lo aplican en su descarga es decir,

    margins = {
      top: 40,
      bottom: 60,
      left: 40,
      width: 522
    };

    Probar este fragmento de abajo, o en este CodePen:

    JS:

    $(document).ready(function() {
      $(".btn").click(function() {
        var doc = new jsPDF("p", "pt", "letter"),
        source = $("#template_invoice")[0],
        margins = {
          top: 40,
          bottom: 60,
          left: 40,
          width: 522
        };
        doc.fromHTML(
          source, //HTML string or DOM elem ref.
          margins.left, //x coord
          margins.top, {
            //y coord
            width: margins.width //max width of content on PDF
          },
          function(dispose) {
            //dispose: object with X, Y of the last line add to the PDF
            //         this allow the insertion of new lines after html
            doc.save("Test.pdf");
          },
          margins
        );
      });
    });

    CSS:

    .btn-info,
    .lead {
      margin-top: 20px;
    }

    HTML:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <div class="container" id="template_invoice">
    <div class="row">
    <div class="col-xs-4">
    <div class="invoice-title">
    <h2>Invoice</h2>
    </div>
    </div>
    <div class="col-xs-4">
    <p class="lead">Order # 12345</p>
    </div>
    <div class="col-xs-4">
    <button class="btn btn-info pull-right">Download</button>
    </div>
    </div>
    <hr>
    <div class="row">
    <div class="col-xs-6">
    <address>
    <strong>Billed To:</strong><br>
    John Smith<br>
    1234 Main<br>
    Apt. 4B<br>
    Springfield, ST 54321
    </address>
    </div>
    <div class="col-xs-6 text-right">
    <address>
    <strong>Shipped To:</strong><br>
    Jane Smith<br>
    1234 Main<br>
    Apt. 4B<br>
    Springfield, ST 54321
    </address>
    </div>
    </div>
    <div class="row">
    <div class="col-xs-6">
    <address>
    <strong>Payment Method:</strong><br>
    Visa ending **** 4242<br>
    [email protected]
    </address>
    </div>
    <div class="col-xs-6 text-right">
    <address>
    <strong>Order Date:</strong><br>
    March 7, 2014<br><br>
    </address>
    </div>
    </div>
    <div class="row">
    <div class="col-md-12">
    <div class="panel panel-default">
    <div class="panel-heading">
    <h3 class="panel-title"><strong>Order summary</strong></h3>
    </div>
    <div class="panel-body">
    <div class="table-responsive">
    <table class="table table-condensed">
    <thead>
    <tr>
    <td><strong>Item</strong></td>
    <td class="text-center"><strong>Price</strong></td>
    <td class="text-center"><strong>Quantity</strong></td>
    <td class="text-right"><strong>Totals</strong></td>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>BS-200</td>
    <td class="text-center">$10.99</td>
    <td class="text-center">1</td>
    <td class="text-right">$10.99</td>
    </tr>
    <tr>
    <td>BS-400</td>
    <td class="text-center">$20.00</td>
    <td class="text-center">3</td>
    <td class="text-right">$60.00</td>
    </tr>
    <tr>
    <td>BS-1000</td>
    <td class="text-center">$600.00</td>
    <td class="text-center">1</td>
    <td class="text-right">$600.00</td>
    </tr>
    <tr>
    <td class="thick-line"></td>
    <td class="thick-line"></td>
    <td class="thick-line text-center"><strong>Subtotal</strong></td>
    <td class="thick-line text-right">$670.99</td>
    </tr>
    <tr>
    <td class="no-line"></td>
    <td class="no-line"></td>
    <td class="no-line text-center"><strong>Shipping</strong></td>
    <td class="no-line text-right">$15</td>
    </tr>
    <tr>
    <td class="no-line"></td>
    <td class="no-line"></td>
    <td class="no-line text-center"><strong>Total</strong></td>
    <td class="no-line text-right">$685.99</td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

    • Sí, pero yo uso la función addHTML() y no funciona. var margins = { top: 100, bottom: 60, left: 100, width: 522 }; var doc = new jsPDF('p', 'pt', 'letter'); doc.addHTML($('#template_invoice')[0], margins.left, margins.top, { width: margins.width }, function () { var pdf = doc.output('blob'); .... }, margins);

Dejar respuesta

Please enter your comment!
Please enter your name here