Comment mettre en œuvre l'impression dans ASP.Net MVC3

dans le cadre de ma tâche actuelle dans une liste donnée d'éléments, l'utilisateur peut sélectionner certains d'entre eux et invoquer "Imprimer" non les éléments sélectionnés.

pour chaque article sélectionné, nous devons imprimer les détails. Elle est similaire à l'impression de factures d'articles sélectionnés dans un système de vente.

j'ai créé une vue partielle pour écrire chaque détail d'enregistrement mais je ne sais pas comment l'utiliser selon mes exigences.

puis-je appeler jQuery imprimer sur le document.prête à réaliser mon exigence?

comme @Levib l'a suggéré, appelant la vue partielle dans mon PrintView. Et le document de PrintView.la fonction reay appelle window.imprimer. Mais quand j'essaie d'invoquer "Print", Je ne vois pas le dialogue print.

C'est mon point de vue,

@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>
}

Et mon impression invocateur de vue est

 function printInvoices(){
            $.ajax({
                type: 'POST',
                url: '/Batch/PrintInvoices',
                data: '{ "allocationId" : "' + unSelected.toString() + '"}',
                contentType: "application/json; charset=utf-8",
                traditional: true,
                success: printedView,
                error: errorInSubscribing
            });
        }

ai-je besoin de gérer ajax reposne pour remplir le dialogue d'impression.

 function printedView() {
            unSelected = [];
        }

et l'action du contrôleur est

[HttpPost]
        public ActionResult PrintInvoices(string allocationId)
        {
            var context = new BatchContext();
            var orderDetails =  context.GetOrderDetails(RetriveList(allocationId));
            return View(orderDetails);
        }
10
demandé sur Naresh 2012-11-29 19:54:31

3 réponses

  • définissez une feuille de style d'impression pour votre page. Pour ce faire, vous utilisez la déclaration imprimée @media.
  • Ce que vous pouvez ensuite faire est d'envelopper chaque vue partielle sur la page que vous allez imprimer dans un div et d'appliquer les 'page-break-before: always' attribut CSS.

Cela permettra d'assurer que chaque partie se termine sur une page différente. Appeler 'window.print()' sur le chargement de la page et vous avez terminé!

compte tenu de l'étendue des questions posées dans les commentaires pour répondre à cette question, voici une description plus détaillée de ce qui doit être fait:

Préparation

  • une feuille de style doit être définie et appliquée à la page qui définit à quoi ressemblera la page une fois imprimée.
    • ceci peut être fait en utilisant un @media print { } déclaration dans une feuille de style existante, ou en appliquant la media="print" l'attribut link balise dans votre page qui comprend la feuille de style. Vous semblez avoir de la fait ceci correctement.
    • Cette feuille de style doit inclure un page-break-before: always déclaration pour tous les éléments devant laquelle vous souhaitez qu'il y ait un saut de page. Vous semblez avoir fait cela avec des styles inline. Personnellement, j'aurais préféré le faire dans la feuille de style d'impression plutôt que comme un style inline. Cette étape fait partie intégrante de votre capacité à imprimer un article par page.

Impression

  • window.print() vous permet comme l'auteur de la page de définir lorsque la page est imprimée. Cela fait la même chose que CTRL+ P ou en cliquant sur le bouton Imprimer, sauf que vous pouvez le faire à partir de votre JavaScript.
  • Ajax n'a rien à voir intrinsèquement avec l'impression. Ajax est un moyen de faire des appels HTTP depuis votre page de manière asynchrone, sans la modifier ou la recharger, et de mettre à jour votre page en conséquence. Si vous vouliez remplir dynamiquement votre page avec des éléments à imprimer basé sur la saisie de l'utilisateur, alors vous pouvez très bien le faire avec l'Ajax. Si vous voulez simplement imprimer la page, alors vous n'avez pas besoin D'utiliser Ajax. Navigator.**

Deux points importants:

  • window.print() imprime la page qui est actuellement à l'écran. Si vous voulez imprimer une page différente, vous devez charger l'autre page d'une façon ou d'une forme (peut-être par une fenêtre popup) et appeler.print() sur cette page.
  • la feuille de style imprimée définit à quoi ressemblera la page imprimée par rapport à la l'écran de la version. Cela signifie que vous pouvez avoir une page d'articles et beaucoup d'autres choses, et de n'imprimer que les éléments lorsque l'utilisateur clique sur le bouton imprimer. Vous feriez cela en mettant le display: none propriété de votre feuille de style imprimée sur tous les éléments que vous ne voulez pas voir apparaître sur la page imprimée.

A Propos Du Pdf:

Je n'ai rien contre l'exportation de pages vers PDF lorsque nécessaire, mais comme vous n'avez pas spécifiquement demandé une solution PDF, je vous ai donné le Solution HTML+CSS à votre question. Il faut aussi une minute pour générer et charger les fichiers PDF. Ils sont grands, cependant, quand vos utilisateurs voudront enregistrer des copies de ce qu'ils impriment. Si c'est le cas pour votre site que je vous recommande vivement d'envisager une telle solution.

Test:

comment tester une feuille de style imprimée? Le plus simple est de simplement cliquer sur le bouton imprimer en Chrome qui va vous montrer un joli aperçu de ce que votre site va ressembler quand il est imprimer.

mot de la fin:

Pour l'instant, oubliez window.print() et concentrez-vous simplement sur le fait que votre page ressemble à ce qu'elle devrait être en appliquant les CSS appropriés. Écrivez votre CSS, lancez votre page, regardez la sortie dans Chrome, modifiez votre feuille de style d'impression au besoin... Rincer et répéter. Ce n'est qu'une fois que la page apparaît exactement comme vous le souhaitez lorsque vous cliquez sur le bouton Imprimer si vous regardez l'appel de la fonction imprimer automatiquement dans votre JavaScript.

15
répondu Levi Botelho 2012-11-30 07:22:05

Comment puis-je faire de l'impression en MVC:

  1. Créer une vue avec exactement ce que vous voulez imprimer layed dehors comment vous voulez qu'il ressemble
  2. Rotativa bibliothèque pour tourner votre vue MVC dans un document pdf.

simple comme changer votre Action pour ressembler à ceci

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

je crois qu'il obéira à la page CSS-break, donc si vous avez besoin d'imprimer un seul article par page, vous pouvez utiliser ce markup pour forcer les articles à de nouvelles pages.

7
répondu Malcolm O'Hare 2012-11-29 16:01:54

je vais créer un PDF pour mieux contrôler la mise en page de la page.

avec jQuery je vais obtenir les éléments sélectionnés de l'utilisateur que faire un appel ajax, ou un simple POST, à une méthode d'action qui acceptent une liste de vos éléments comme paramètre et puis retourner un filestream contenant votre pdf.

il y a beaucoup de bibliothèques libres et commerciales pour créer un pdf à la fois à l'exécution ou au moment de la conception.

personnellement, j'utilise DevExpress et je suis heureux avec elle.

comme alternative opensource vous pouvez considérer PDFSharp

1
répondu Iridio 2012-11-29 16:03:16