如何在 ASP.Net MVC3 中实现打印

Question

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

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

我已经创建了一个局部视图来编写每条记录的详细信息，但我不确定如何按照我的要求使用它。

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

正如@Levib 建议的那样，在我的 PrintView 中调用局部视图。而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>
}

我的打印调用者视图是

 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 reposne 来填充打印对话框。

 function printedView() {
            unSelected = [];
        }

控制器动作是

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

Answer 1

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

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

---

鉴于 cmets 对此答案提出的广泛问题，以下是对需要做什么的更详细描述：

准备

• 需要定义样式表并将其应用于页面，该页面定义了打印时页面的外观。
  • 这可以通过在现有样式表中使用@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 中自动调用打印函数。

Answer 2

我如何在 MVC 中进行打印：

1. 创建一个视图，其中包含您想要打印的内容以及您想要的外观
2. 使用Rotativa 库将您的MVC 视图转换为pdf 文档。

只需将您的操作更改为如下所示

public ActionResult PrintInvoice(int invoiceId)
{
  return new ActionAsPdf(
                 "Invoice", 
                 new { invoiceId= invoiceId }) 
                 { FileName = "Invoice.pdf" };
}

我相信它会遵守 css 分页符，因此如果您只需要每页打印一个项目，您可以使用该标记将项目强制到新页面。

Answer 3

我将创建一个 PDF 以更好地控制页面的布局。

使用 jQuery，我将从用户那里获取选定的项目，而不是进行 ajax 调用或简单的 POST，以接受您的项目列表作为参数的操作方法，然后返回包含您的 pdf 的文件流。

有很多免费和商业的库可以在运行时或设计时创建 pdf。

我个人使用DevExpress，对此我很满意。

作为开源替代方案，您可以考虑PDFSharp