Question

我的视图有一个包含从我的模型生成的多个表的div。可以修改此表中每行中的每个字段（TextBoxFor字段）。行也可以在表之间移动，并且也可以在视图中创建整个新表，所有这些都是通过jQuery完成的。当我提交包含这些表的表单时，正确的修改数据将发送回我的控制器。但是，当调用JS打开浏览器的打印窗口时，div的内容就是它们在视图中进行更改之前的内容（即，在移动行之前，值已更改，创建了新表）。单击提交按钮时，将调用我的打印命令：

$('#save').click(function () {
    w = window.open();
    w.document.write($('#tables-wrapper').html());
    w.document.close();
    w.focus();
    w.print();
    w.close();
});

如何在单击按钮时打印div的状态，而不是最初加载到DOM中的div？这甚至可能吗？

Answer 1

您可以使用CSS媒体查询打印当前窗口，而不是将＃tables-wrapper的内容写入新窗口，以便在打印时隐藏不必要的内容。

HTML：

<div class="noprint">
  <h1>
  Stuff you don't want printed
  </h1>
</div>

<table id="tables-wrapper">
  <tr>
    <td>Row 1</td>
  </tr>
</table>

<input type="button" id="save" value="Save" />

<div class="noprint">
  <h3>
  More stuff you don't want printed
  </h3>
</div>

CSS：

@media print {
  #tables-wrapper {
    width: 100%;
  }
  #tables-wrapper td {
    border: 1px solid black;
  }
  .noprint {
    display: none;
  }
}

的jsfiddle：

https://jsfiddle.net/OsborneSupremacy/9ts56r0z/

ASP.NET MVC - 打印初始页面加载后由jQuery修改的div

1 个答案: