0
bricht Ich habe eine Option für den Benutzer, weitere Zeile basierend auf der Benutzerauswahl hinzufügen. Wenn ich eine Zeile mehr als 9 oder 10 hinzufüge, wird die Seite unterbrochen und die letzte Zeile wird zur Hälfte. Ich habe 3 Tasten Hinzufügen, Entfernen und Speichern.Wie die Seite automatisch mit jspdf
- Hinzufügen - um weitere Zeilen hinzuzufügen.
- Entfernen - um die Reihe zu reduzieren.
- Speichern - um als pdf zu speichern.
Dies ist mein Skript, wo ich Zeile hinzufügen und entfernen passiert.
Skript: Zeile hinzufügen und entfernen.
$(document).ready(function()
{
$("#addMore").click(function()
{
$("#customFields").append('<tr><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td></tr>');
});
$("#removeRow").click(function()
{
if ($('#customFields tbody tr').length== 1)
{
alert('Error');
}
else
{
$('#customFields tr:last').remove();
}
});
});
Skript: Als pdf speichern.
$("#save").click(function()
{
var values = "";
//i is the iterator and c is the control. So every elements iterates through the second input of callback function in this case the c variable. c is literally this current element in the array/
$.each($(".form-control"), function(i, c)
{
values = values + $(c).val().trim(); // .trim() to remove white-space
});
if(values.length > 0)
{
html2canvas(document.getElementById("captureMyDiv"),
{
onrendered: function(canvas)
{
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG',0,0);
doc.save('text.pdf');
}
});
}
else
{
alert('Cannot be left blank');
}
});
HTML:
<div class = "col-md-8" id = "captureMyDiv">
<div class="jumbotron text-center">
<h2 style = "text-align: center">REQUISITION AND ISSUE SLIP</h2>
<h4 style = "text-align: center">NATIONAL LABOR RELATIONS COMMISSION</h4>
</div>
<form class = "form-vertical">
<div class = "form-group">
<label class = "control-label">Department:</label>
<input type = "text" class = "form-control">
</div>
<div class = "form-group">
<label class = "control-label">Office:</label>
<input type = "text" class = "form-control">
</div>
<div class = "form-group">
<label class = "control-label">Responsibility Center Code:</label>
<input type = "text" class = "form-control">
</div>
<div class = "form-group">
<label class = "control-label">RIS No:</label>
<input type = "text" class = "form-control">
</div>
<div class = "form-group">
<label class = "control-label">SAI No:</label>
<input type = "text" class = "form-control">
</div>
</form>
<table class = "table" id = "customFields">
<thead>
<tr>
<th>Stock No.</th>
<th>Unit</th>
<th>Description</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
</tr>
</tbody>
</table>
<button type = "submit" class = "btn btn-primary" id = "addMore">+ Add</button>
<button type = "submit" class = "btn btn-danger" id = "removeRow">- Remove</button>
<button type = "submit" class = "btn btn-success" id = "save">Save</button>
</div>
Screenshot:
