MVC 为一个表格行创建一个 PDF 文件

Question

我在添加会为特定表格行生成 PDF 文件的按钮时遇到问题。我可以对整个表执行此操作，但不能对特定行执行此操作。

我的“执行”视图（为整个表格创建 PDF 文件）：

<div id="Grid">
            <table class="table table-hover table-bordered" id="ExeTable">
                <thead>
                    <tr>
                        <th class="text-center">Order nr</th>
                        <th class="text-center">Mat nr</th>
                        <th class="text-center">SAP nr</th>
                        <th class="text-center">Batch nr</th>
                        <th class="text-center">Tank</th>
                    </tr>
                </thead>
                <tbody id="myTable">
                    @foreach (var item in Model.ib)
                    {
                        <tr>
                            <td class="text-center">@item.OrderNr</td>
                            <td class="text-center">@item.MatNr</td>
                            <td class="text-center">@item.SapNr</td>
                            <td class="text-center">@item.BatchNr</td>
                            <td class="text-center">@item.TankName</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>

    @using (Html.BeginForm("Export", "Order", FormMethod.Post))
        {
            <input type="hidden" name="GridHtml" />
            <input type="submit" id="btnSubmit" value="Export" />
        }


    <script>
        $(function (print) {
            $("#btnSubmit").click(function () {
                $("input[name='GridHtml']").val($("#Grid").html());
            });
        });
    </script>

但我想在表格中有一个新列，其中有一个按钮可以为特定行生成 PDF。我尝试了一些方法，但没有成功。

// I tried this
<table class="table table-hover table-bordered" id="ExeTable">
                <thead>
                    <tr>
                        <th>Create PDF</th>
                        <th class="text-center">Order nr</th>
                        <th class="text-center">Mat nr</th>
                        <th class="text-center">SAP nr</th>
                        <th class="text-center">Batch nr</th>
                        <th class="text-center">Tank</th>
                    </tr>
                </thead>
                <tbody id="myTable">
                    @foreach (var item in Model.ib)
                    {
                        <tr>
                            <td class="text-center">
                                @using (Html.BeginForm("Export", "Order", FormMethod.Post))
                                {
                                    <input type="hidden" name="GridHtml" />
                                    <input type="submit" id="btnSubmit" value="Export" />
                                }
                            </td>
                            <td class="text-center">@item.OrderNr</td>
                            <td class="text-center">@item.MatNr</td>
                            <td class="text-center">@item.SapNr</td>
                            <td class="text-center">@item.BatchNr</td>
                            <td class="text-center">@item.TankName</td>
                        </tr>
                    }
                </tbody>
            </table>

我在“订单”控制器中生成 PDF 文件的方法：

[HttpPost]
        [ValidateInput(false)]
        public FileResult Export(string GridHtml)
        {
            using (MemoryStream stream = new System.IO.MemoryStream())
            {
                StringReader sr = new StringReader(GridHtml);
                Document pdfDoc = new Document(PageSize.A4);
                PdfWriter writer = PdfWriter.GetInstance(pdfDoc, stream);
                pdfDoc.Open();
                XMLWorkerHelper.GetInstance().ParseXHtml(writer, pdfDoc, sr);
                pdfDoc.Close();
                return File(stream.ToArray(), "application/pdf", "Grid.pdf");
            }
        }

Answer 1

您的初始示例提取了Grid 元素的内部内容。似乎没有周围的可识别元素可以从中提取一行的内容。一个简单的解决方法是为每一行添加一个 id，将按钮 id 更改为一个类以添加事件侦听器，并添加一个 data- 属性来保存单击哪一行的信息：

@foreach (var item in Model.ib)
{
    <tr id="@item.OrdrNr">
        <td class="text-center">
            @using (Html.BeginForm("Export", "Order", FormMethod.Post))
            {
                <input type="hidden" name="GridHtml" />
                <input type="submit" class="btnSubmit" data-row="#@item.OrdeNr" value="Export" />
            }
        </td>
        <td class="text-center">@item.OrderNr</td>
        <td class="text-center">@item.MatNr</td>
        <td class="text-center">@item.SapNr</td>
        <td class="text-center">@item.BatchNr</td>
        <td class="text-center">@item.TankName</td>
    </tr>
}

还有 JavaScript：

$(".btnSubmit").click(function (event) {
    var target = $(event.currentTarget).data('row');
    $("input[name='GridHtml']").val($(target).html());
});

这将发送给您的控制器的只是点击行的内容：

<td class="text-center">
    @using (Html.BeginForm("Export", "Order", FormMethod.Post))
    {
        <input type="hidden" name="GridHtml" />
        <input type="submit" class="btnSubmit" data-row="#@item.OrdeNr" value="Export" />
    }
</td>
<td class="text-center">@item.OrderNr</td>
<td class="text-center">@item.MatNr</td>
<td class="text-center">@item.SapNr</td>
<td class="text-center">@item.BatchNr</td>
<td class="text-center">@item.TankName</td>

在控制器中，您可以移除按钮，将其包裹在其余的表格标签中，然后转换为 PDF。