0
Что я хочу сделать, так это распечатать веб-страницу. Я считаю, что я ищу страницу предварительного просмотра, но я не уверен, как это сделать. Я хотел бы только распечатать определенную информацию на текущей странице.Как распечатать проект и распечатать определенные элементы с веб-страницы
Вот мой контроллер
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>
Вот скриншот того, как он в настоящее время выкладывается.
Я хочу, чтобы распечатать все в белом с лин над такими как «Caplus запад», «р», «Количество» и «б» #
Вот мой 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;
}
}
Когда я сделал это ничего не происходит, я могу напечатать страницу, но я бы только чтобы печатать определенные части веб-страницы, а не всю страницу. Поскольку у меня нет 10 репутации, я не могу добавить снимок экрана моей веб-страницы, поэтому я могу лучше объяснить себя. Думаю, мне нужно добавить экран предварительного просмотра, чтобы я мог захватить только определенную информацию с веб-страницы, а затем распечатать страницу предварительного просмотра печати? –
@MikeMacko Этот css позволит вашей печатной версии страницы исключать определенные данные. Таким образом, любой элемент, который вы помещаете в класс 'noprint', появится на экране, но будет исключен, когда вы его распечатаете. –
@MikeMacko действительно нужен скриншот, не можете ли вы предоставить ссылку pastebin? –