Question

我为用户输入创建了一个表格，我提供了一些文本字段，以便它可以填满表格。我想做什么我只是希望用户填写表格并将其保存为pdf，这不会在数据库中创建记录或插入。

我只想完全保存为pdf。但遗憾的是，当我<input type="text" class="form-control">将其插入表格数据<td></td>时。单元格的值变为<input type="text" class="form-control">。

表：

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

    <table class = "table" id = "customFields">

        <thead>
            <tr>
                <th>Stock No.</th>
                <th>Unit</th>
                <th class = "description">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 = "downloadPDF">Download as PDF</button>

</div>

脚本：

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)
            {
                if(j == "#description" | j == 0)
                {
                    doc.cell(1,10,190,20,cell,i);
                }
                else
                {
                    doc.cell(1,10,90,20,cell,i);
                }
            });
        });

        doc.save('text.pdf');
    }

    $(document).ready(function ()
    {
        $("#downloadPDF").click(function ()
        {
            javascript:genPDF();
        });
    });

示例JFiddle：

＆＃13;

$(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) {


    } else {
      $('#customFields tr:last').remove();
    }

  });
});


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) {
      if (j == "#description" | j == 0) {
        doc.cell(1, 10, 190, 20, cell, i);
      } else {
        doc.cell(1, 10, 90, 20, cell, i);
      }
    });
  });

  doc.save('text.pdf');
}

$(document).ready(function() {
  $("#downloadPDF").click(function() {
    javascript: genPDF();
  });
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">

  <table class="table" id="customFields">

    <thead>
      <tr>
        <th>Stock No.</th>
        <th>Unit</th>
        <th class="description">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="downloadPDF">Download as PDF</button>

</div>

＆＃13;

干杯

Answer 1

可以使用<input>循环遍历所有单元格，并在将表格序列化为json之前将其替换为其值

$('td:has(input)').text(function(){
   return $(this).find('input').val();
});

如何从表数据中获取输入文本

1 个答案: