从textfield获取值以另存为PDF

时间:2016-07-13 17:20:04

标签: javascript php jquery pdf jspdf

我已经可以根据用户输入检索单元格中的每个值。用这个。

$("#customFields > tbody tr > td").each(function() 
{
 console.log($(this).find("input").val());
});

但是我在如何在文本字段中添加用户输入时遇到了一些问题?当我以pdf格式保存时,我在一个单元格中得到了一个被弄皱的<input type="text" class="form-control">并且它没有得到我输入的值。截图如下。

截图:

SC

有什么方法可以输入我在每个单元格中插入的值?我被困在这部分我需要别人的意见我该怎么办呢。

表:

<div class = "col-md-12">

    <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-primary" id = "save">Save</button>
</div>

脚本:

  $("#customFields > tbody tr > td").each(function() {
    console.log($(this).find("input").val());
  });

  function tableToJson(table) {

    var data = [];

    // first row needs to be headers
    var headers = [];

    for (var i = 0; i < table.rows[0].cells.length; i++) {
      headers[i] = table.rows[0].cells[i].innerHTML.replace();
    }

    data.push(headers);
    // go through cells
    for (var i = 1; i < table.rows.length; i++) {

      var tableRow = table.rows[i];
      var rowData = {};

      for (var j = 0; j < tableRow.cells.length; j++) {

        rowData[headers[j]] = tableRow.cells[j].innerHTML;

      }

      data.push(rowData);
    }

    return data;
  }

  function genPDF() {
    //tableToJson is a special function which converts HTML object to Javascript Object Notation

    var table = tableToJson($('#customFields').get(0));

    //Defining pdf object
    var doc = new jsPDF('1', 'pt', 'letter', true);

    doc.cellInitialize();
    $.each(table, function(i, row) {
      $.each(row, function(j, cell) {
        doc.cell(1, 10, 90, 20, cell, i);
      });
    });
    doc.save('text.pdf');
  }

  javascript: genPDF();

1 个答案:

答案 0 :(得分:1)

将您的源代码替换为:

for (var j = 0; j < tableRow.cells.length; j++) {
    rowData[headers[j]] = tableRow.cells[j].children[0].value;
    alert(rowData[headers[j]]);
}

这是我的考试 enter image description here

希望这可以帮到你。的xD