我有一个 MVC View 和这样的 View 。打印这张图片时我不想出现Button 和TextBox。 此代码仅有效但不打印 CSS。 以及我的 View 和 javascript 打印这样的代码
@model dynamic
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}
<link href="~/print.css" rel="stylesheet" />
<link href="~/Content/assets/css/style.css" rel="stylesheet" />
<div class="event-container">
<div class="row">
@foreach (var item in Model.JoinData)
{
BLL.Concretes.OrderDetailRepository ord = new BLL.Concretes.OrderDetailRepository();
var olacak = ord.GetWithDeleted().Where(x => x.Order.Chair.ChairNo == item.ChairNo && x.Order.Chair.Table.TableNo == item.TableID).GroupBy(x => x.Product.ProductName).Select(x => new
{
Urunadi = x.FirstOrDefault().Product.ProductName,
SiparisMiktari = x.ToList().Count()
}).ToList();
<div id="@item.ChairNo@item.TableID" class="item col-xs-12">
<div class="event-item wow fadeIn animated" data-wow-delay="0.1s">
<div class="event-place">
<b>Masa:</b>@item.TableID<br />
<b>Ürünler :</b><br />
@foreach (var item2 in olacak)
{
@(item2.SiparisMiktari + "*" + item2.Urunadi) <br />
}
<strong>Fiyat:</strong><div id="olacak">@item.Fiyat</div>
<strong>Miktar:</strong><b id="s2">@item.Miktar<br /></b>
<input type="button" value="Sandalye Ödemesi Yap" class="btn" onclick="onayla(@item.ChairNo,@item.TableID)" />
</div>
<strong>Verilen Para:</strong>@Html.TextBox("VerilenParaSandalye")<br />
@Html.ValidationMessage("VerilenParaSandalye", "", new { @class = "text-danger" })
<input type="submit" value="Fişkes" class="btn" onclick="onay(document.getElementById('VerilenParaSandalye').value,@item.ChairNo,@item.TableID,@item.Fiyat)" />
<div class="event-time">
<span class="event-month">Sandalye</span>
<span class="event-date">@item.ChairNo</span>
</div><!-- /.event-time -->
</div><!-- /.event-item -->
</div>
<input id="maradaona" type="hidden" name="name" value="@item.ChairNo@item.TableID" />
}
</div><!-- /.row -->
</div>
<script type="text/javascript">
function onay(VerilenParaSandalye, ChairNo, TableID, Fiyat) {
$.post(
'@Url.Action("validate", "Kasa")',
{ VerilenParaSandalye: VerilenParaSandalye, ChairNo: ChairNo, TableID: TableID },
function (VerilenParaSandalye) {
$.call(VerilenParaSandalye, function (index, county) {
var toPrint = document.getElementById(ChairNo + "" + TableID);
var popupWin = window.open('', '_blank');
popupWin.document.open();
popupWin.document.write('<html><head><title>HotCatCafe</title><link href="~/print.css" rel="stylesheet" /><img src="~/Content/images/logo.png" /></head><body onload="window.print()">')
popupWin.document.write(toPrint.innerHTML);
popupWin.document.write('Verilen Para : ' + VerilenParaSandalye + '<br/>');
popupWin.document.write('Para Üstü : ' + (VerilenParaSandalye - Fiyat));
popupWin.document.write('</body></html>');
popupWin.document.close();
}
)
}
);
}
if (Session["VerilenParaSandalye"] == document.getElementById('maradaona').value) {
function onayla(ChairNo, TableID) {
$.ajax({
type: "POST",
url: "@Url.Action("SandalyeTopluOdeme", "Kasa")" + "?ChairNo=" + ChairNo + "&TableID=" + TableID,
success: function (ids) {
$("#" + ChairNo + TableID).fadeOut();
}
})
}
}
</script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>还有我的打印和样式 CSS
这是打印CSS
@media print
{
.btn
{
display: none;
}
.event-place
{
width: 25%;
-webkit-print-color-adjust: exact;
}
}
@media screen
{
.btn
{
display: none;
}
.event-place
{
width: 25%;
}
}和这种风格的CSS
@media screen /*--This is for Print--*/
{
.btn {
display: block;
}
.event-place
{
width: 25%;
}
}因此我如何让我的照片出现。我不想看到 TextBox 和 Button。
最佳答案
在 style.css 样式表之前加载 print.css 样式表。由于您在两者中都使用了媒体指令，因此应该没有问题，但我会最后加载打印样式。另外，您可以使用像 FireBug 这样的工具来确定样式是否实际加载了吗？
我运行了代码示例，发现“btn”类应用于提交按钮，但我无法验证 CSS 文件是否已实际加载。
您在使用显示的正确轨道上:无；打印媒体的样式。加载页面或样式表时必须存在问题，以防止将样式正确应用到按钮。
我确实注意到行中的语法错误:
url: "@Url.Action("SandalyeTopluOdeme", "Kasa")"+ "?ChairNo="+ ChairNo + "&TableID="+ TableID,
您似乎在 Kasa 之后的右括号后有一个附加引号。
应该这样写:
url: "@Url.Action("SandalyeTopluOdeme", "Kasa") + "?ChairNo="+ ChairNo + "&TableID="+ TableID,
祝你好运!
关于javascript - Javascript 如何不打印我的文本框按钮并打印我的照片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32377645/