Как реализовать печать в ASP.Net MVC3

В рамках моей текущей задачи в определенном списке элементов пользователь может выбрать некоторые из них и вызывать "Печать" нет выбранных элементов.

Для каждого выбранного элемента нам нужно распечатать детали. Он похож на печать счетов-фактур отдельных элементов в системе продаж.

Я создал частичное представление для записи каждой записи, но я не уверен, как ее использовать в соответствии с моим требованием.

Можно ли вызвать jQuery для печати на document.ready для выполнения моих требований?

Как предложил @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);
        }

Ответы

Ответ 1

  • Определите таблицу стилей печати для вашей страницы. Вы делаете это, используя объявление печати @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.

Ответ 2

Как я печатаю в MVC:

  • Создайте представление, с помощью которого вы хотите распечатать, как вы хотите, чтобы он выглядел.
  • Используйте библиотеку Rotativa, чтобы превратить ваш MVC View в PDF-документ.

Просто, как изменение вашего действия, чтобы выглядеть следующим образом

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

Я считаю, что он будет подчиняться разрыву страницы css, поэтому, если вам нужно только распечатать один элемент на странице, вы можете использовать эту разметку, чтобы принудительно нанести элементы на новые страницы.

Ответ 3

Я создам PDF для лучшего управления макетом страницы.

С jQuery я выберу выбранные элементы у пользователя, чем сделаю ajax-вызов или простой POST, к методу действий, который принимает список ваших элементов в качестве параметра, а затем возвращает поток, содержащий ваш pdf файл.

Существует множество бесплатных и коммерческих библиотек для создания pdf файла как во время выполнения, так и во время разработки.

Я лично использую DevExpress, и я доволен этим.

В качестве альтернативы с открытым исходным кодом вы можете рассмотреть PDFSharp