10

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

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

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

我可以在 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);
        }
4

3 回答 3

15
  • 为您的页面定义一个打印样式表。您可以使用@media 打印声明来执行此操作。
  • 然后，您可以将要打印的页面上的每个局部视图包装在一个 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 中自动调用打印功能。

于 2012-11-29T16:03:05.437 回答
7

我如何在 MVC 中进行打印：

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

就像将您的操作更改为如下所示一样简单

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

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

于 2012-11-29T16:01:54.707 回答
1

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

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

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

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

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

于 2012-11-29T16:03:16.650 回答