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中进行打印：

创建一个视图，其中包含您要打印的内容，以及如何显示
使用Rotativa库在PDF文档中转换MVC视图。

简单地将您的操作更改为

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

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

3 个答案:

制备

打印

两个要点：

关于PDF：

测试：

最后一句话：