如何在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 print声明来完成此操作.
• 然后你可以做的是将每个局部视图包装在你要在div中打印的页面上,并将'page-break-before: always'CSS属性应用于它.

这将确保每个局部视图最终位于不同的页面上.调用'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中自动调用打印功能.

Answer 2

我如何在MVC中打印:

1. 创建一个视图,其中包含您要打印的内容,并列出您希望它的外观
2. 使用Rotativa库在PDF文档中打开MVC视图.

简单地将Action更改为这样

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

我相信它会服从css分页符,所以如果你只需要每页打印一个项目,你可以使用该标记强制项目到新页面.