如何打印项目并从网页打印某些项目

时间：2013-11-20 14:30:26

标签： c# asp.net

我想要做的是能够打印出一个网页。我相信我正在寻找打印预览页面，但我不知道如何做到这一点。我只想打印出当前页面的某些信息。

这是我的控制器

using NavisionStore.Domain.Abstract;
using NavisionStore.Domain.Entities;
using NavisionStore.WebUI.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace NavisionStore.WebUI.Controllers
{
    public class PrintController : Controller
    {
        private IProductRepository repository;

        public PrintController(IProductRepository repo)
        {
            repository = repo;
        }

        public ViewResult Index(string returnUrl)
        {
            return View(new PrintIndexViewModel
            {
                Print = GetPrint(),
                ReturnUrl = returnUrl
            });
        }
         public RedirectToRouteResult AddtoPrint(int id, string returnUrl)
        {
            Product product = repository.Products
                .FirstOrDefault(p => p.Id == id);

            if (product != null)
            {
                GetPrint().AddItem(product, 1);
            }
            return RedirectToAction("Index", new { returnUrl });
        }

        public RedirectToRouteResult RemoveFromPrint(int id, string returnUrl)
        {
            Product product = repository.Products
                .FirstOrDefault(p => p.Id == id);

            if (product != null)
            {
                GetPrint().RemoveLine(product);
            }
            return RedirectToAction("Index", new { returnUrl });
        }

        private Print GetPrint()
        {
            Print print = (Print)Session["Print"];
            if (print == null)
            {
                print = new Print();
                Session["Print"] = print;
            }
            return print;
        }
    }
}

这是我的视图模型类

using NavisionStore.Domain.Entities;

namespace NavisionStore.WebUI.Models
{
    public class PrintIndexViewModel
    {
        public Print Print { get; set; }
        public string ReturnUrl { get; set; }
    }
}

这是我的索引视图模型

@model NavisionStore.WebUI.Models.PrintIndexViewModel

@{
    ViewBag.Title = "Bag Labels: Your Print";
}

<h2>Caplugs West</h2>
<table width="90%" align="center">
    <thead><tr>
        <th align="center">PN:</th>
        <th align="center">QTY:</th>
        <th align="center">B#</th>
           </tr></thead>
    <tbody>
        @foreach(var line in Model.Print.Lines) {
            <tr>
                <td align="center">@line.Product.PartName</td>
                <td align="center">@line.Product.Quantity</td>
                <td align="center">@line.Product.BagNumber</td>
            </tr>
        }
    </tbody>
    </table>
    <p align="center" class="actionButtons">
        <a href="@Model.ReturnUrl">Continue shopping</a>
    </p>

这是我的默认布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/Content/Site.css" type="text/css" rel="stylesheet" />
</head>
<body>
   <div id="header">
       <div class="title">Bag Labels</div>
   </div>
    <div id="categories">
        @{ Html.RenderAction("Menu", "Nav"); }
    </div>
    <div id="content">
         @RenderBody()
    </div>
</body>
</html>

以下是目前如何布局的屏幕截图。

Screenshot

我想打印出林中的白色字样，例如“caplus west”“pn”“qty”和“b＃”

这是我的Site.css 

body {
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
}

header, footer, nav, section {
    display: block;
}


/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

.editor-label {
    margin: 1em 0 0 0;
}

.editor-field {
    margin: 0.5em 0 0 0;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

.validation-summary-valid {
    display: none;
}

BODY { font-family: Cambria, Georgia, "Times New Roman"; margin: 0; }
DIV#header DIV.title, DIV.item H3, DIV.item H4, DIV.pager A {
    font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;
}

DIV#header {
    background-color: #444;
    border-bottom: 2px solid #111;
    color: white;
}
DIV#header DIV.title {
        font-size: 2em;
        padding: .6em;
}
DIV#content {
    border-left: 2px solid gray;
    margin-left: 9em;
    padding: 1em;
}
DIV#categories {
    float: left;
    width: 8em;
    padding: .3em;
}

DIV.item {
    border-top: 1px dotted gray;
    padding-top: .7em;
    margin-bottom: .7em;
}
    DIV.item:first-child {
        border-top: none;
        padding-top: 0;
}
    DIV.item H3 {
        font-size: 1.3em;
        margin: 0 0 .25em 0;
}
    DIV.item H4 {
        font-size: 1.1em;
        margin: .4em 0 0 0;
}

DIV.pager {
    text-align: right;
    border-top: 2px solid silver;
    padding: .5em 0 0 0;
    margin-top: 1em;
}
DIV.pager A {
    font-size: 1.1em;
    color: #666;
    text-decoration: none;
    padding: 0 .4em 0 .4em;
}
    DIV.pager A:hover {
        background-color: silver;
    }
    DIV.pager A.selected {
        background-color: #353535;
        color: white;
    }

DIV#categories A {
    font: bold 1.1em "Arial Narrow","Franklin Gothic Medium",Arial;
    display: block;
    text-decoration: none;
    padding: .6em;
    color: black;
    border-bottom: 1px solid silver;
}
    DIV#categories A.selected {
        background-color: #666;
        color: white;
    }
    DIV#categories A.hover {
        background-color: #CCC;
    }
    DIV#categories A.selected:hover {
        background-color: #666;
    }

FORM {
    margin: 0;
    padding: 0;
}
DIV.item FORM {
    float: right;
}
DIV.item INPUT {
    color: white;
    background-color: #333;
    border: 1px solid black;
    cursor: pointer;
}

H2 {
    margin-top: 0.3em;
}
.actionButtons A, INPUT.actionButtons {
    font: .8em Arial;
    color: white;
    margin: .5em;
    text-decoration: none;
    padding: .15em 1.5em .2em 1.5em;
    background-color: #353535;
    border: 1px solid black;
}
@media print {
    .noprint {
        display: none;
    }
}
@media print {
    #header, #categories, .actionButtons {
        display: none;
    }
}

1 个答案:

答案 0 :(得分：1)

您可以使用CSS来控制打印页面时会发生什么

例如在你的css文件中，如果你这样做

@media print {
  .noprint { display: none; }
}

然后你可以做

@model NavisionStore.WebUI.Models.PrintIndexViewModel

@{
    ViewBag.Title = "Bag Labels: Your Print";
}

<h2>Caplugs West</h2>
<table width="90%" align="center">
<thead><tr>
    <th align="center">PN:</th>
    <th align="center">QTY:</th>
    <th align="center">B#</th>
       </tr></thead>
<tbody>
    @foreach(var line in Model.Print.Lines) {
        <tr>
            <td align="center">@line.Product.PartName</td>
            <td align="center">@line.Product.Quantity</td>
            <td align="center">@line.Product.BagNumber</td>
        </tr>
    }
</tbody>
</table>
<p align="center" class="actionButtons noprint">
    <a href="@Model.ReturnUrl">Continue shopping</a>
</p>

打印时不会出现按钮。

** UPDATE2 **

将以下内容放在Site.css

的末尾 
@media print {
  #header, #categories, .actionButtons {
      display: none;
  }

  DIV#content {
      border-left: 0;
      margin-left: 0;
  }
}

我还创建了一个JS小提琴，以显示它正常工作http://jsfiddle.net/Hg79x/1/

现在，当您查看页面时，您将获得整页，但您的打印（或浏览器打印预览对话框）将仅包含内容。

您还可以在body部分的html和@media print添加一些格式，以进一步格式化页面布局（例如设置宽度）

相关问题
最新问题