c# - ASP.Net MVC3中如何实现打印

Question

作为我在给定项目列表中的当前任务的一部分，用户可以选择其中的一些项目并调用“打印”不选择的项目。

对于每个选定的项目，我们需要打印详细信息。它类似于在销售系统中打印选定项目的发票。

我已经创建了一个局部 View 来写入每条记录的详细信息，但我不确定如何根据我的要求使用它。

我可以在 document.ready 上调用 jQuery print 来实现我的要求吗？

正如@Levib 所建议的，在我的 PrintView 中调用部分 View 。而PrintView的document.reay函数就是在调用window.print。但是当我尝试调用“打印”时，我看不到打印对话框。

这是我的看法，

@section Styles
{
    <link rel="stylesheet" href="AdminStyle.css" type="text/css" media="all" />
    <link rel="stylesheet" href="AdminPrintOrder.css" type="text/css" media="print" />
}

@foreach (var item in Model)
{
    <div id="content" style="page-break-before: always">
        @{Html.RenderPartial("_OrderDetailView", item);}
    </div>   
}

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            debugger;
            window.print();
        });
    </script>
}

我的打印调用 View 是

 function printInvoices(){
            $.ajax({
                type: 'POST',
                url: '/Batch/PrintInvoices',
                data: '{ "allocationId" : "' + unSelected.toString() + '"}',
                contentType: "application/json; charset=utf-8",
                traditional: true,
                success: printedView,
                error: errorInSubscribing
            });
        }

我是否需要处理 ajax 响应来填充打印对话框。

 function printedView() {
            unSelected = [];
        }

Controller Action 是

[HttpPost]
        public ActionResult PrintInvoices(string allocationId)
        {
            var context = new BatchContext();
            var orderDetails =  context.GetOrderDetails(RetriveList(allocationId));
            return View(orderDetails);
        }

Answer 1

• 为您的页面定义打印样式表。您可以使用@media 打印声明来执行此操作。
• 然后您可以做的是将您要打印的页面上的每个部分 View 包装在一个 div 中，并对其应用 'page-break-before: always' CSS 属性。

这将确保每个分部 View 最终出现在不同的页面上。在页面加载时调用 'window.print()'，您就完成了!

---

鉴于此答案的评论中提出的广泛问题，这里更详细地描述了需要做什么:

准备

• 需要定义样式表并将其应用到页面，以定义页面在打印时的外观。
  • 这可以通过在现有样式表中使用 @media print { } 声明来完成，也可以通过将 media="print" 属性应用于 link 标签在您的页面中，其中包含样式表。您似乎正确地完成了这项工作。
  • 此样式表必须包含一个 page-break-before: always 声明，用于您希望在其之前有分页符的所有元素。您似乎已经使用内联样式完成了此操作。就个人而言，我宁愿在打印样式表中这样做，也不愿将其作为内联样式。此步骤对于您能够每页打印一个项目是不可或缺的。

打印

• window.print() 允许您作为页面作者来定义页面的打印时间。这与 CTRL + P 或单击打印按钮的作用相同，只是您可以通过 JavaScript 执行此操作。
• Ajax 本质上与打印无关。 Ajax 是一种从您的页面异步进行 HTTP 调用而无需更改或重新加载它并因此更新您的页面的方法。如果您想根据用户输入使用要打印的项目动态填充您的页面，那么您完全可以使用 Ajax 来实现。如果您只想打印页面，则不需要使用 Ajax。导航器。**

两个要点:

• window.print() 打印当前屏幕上的页面。如果您想打印不同的页面，您需要以某种方式(可能通过弹出窗口)加载其他页面并在该页面上调用 window.print()。
• 打印样式表定义打印页面与屏幕版本对比的外观。这意味着您可以拥有一页项目和许多其他内容，并在用户单击打印按钮时仅打印这些项目。为此，您可以在打印样式表中为所有不想显示在打印页面上的元素设置 display: none 属性。

关于 PDF:

我不反对在必要时将页面导出为 PDF，但由于您没有具体询问 PDF 解决方案，我已经为您提供了 HTML+CSS 解决方案来解决您的问题。 PDF 也需要一分钟的时间来生成和加载。然而，当您的用户想要保存他们正在打印的内容的副本时，它们就很棒了。如果您的网站属于这种情况，我强烈建议您考虑这样的解决方案。

测试:

如何测试打印样式表？最简单的方法是只需点击 Chrome 中的打印按钮，它会向您展示您的网站在打印时的外观预览。

结语:

现在，忘掉 window.print()，只专注于通过应用适当的 CSS 让您的页面看起来像它应该的样子。编写您的 CSS，运行您的页面，查看 Chrome 中的输出，根据需要修改您的打印样式表……冲洗并重复。只有在单击打印按钮时页面完全按照您想要的方式显示后，您才应该考虑在 JavaScript 中自动调用打印函数。