如何在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' 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()忘記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分頁符，所以如果你只需要每頁打印一個項目，你可以使用該標記強制項目到新頁面。

Answer 3

我將創建一個PDF來更好地控制頁面的布局。

使用jQuery，我將從用戶那里獲取所選項，而不是將ajax調用或簡單的POST調用到接受項目列表作為參數的操作方法，然后返回包含pdf的文件流。

在運行時或設計時，有許多免費和商業的庫可以創建pdf。

我個人使用DevExpress ，我很高興。

作為開源替代方案，您可以考慮使用PDFSharp