时间戳

首页 > 解决方案 > 使用 javascript 打印时未出现 Ajax Rating Control

javascript - 使用 javascript 打印时未出现 Ajax Rating Control

问题描述

我在我的 aspx 页面中有 Ajax 评级控制。当我使用 javascript 打印页面时，评级控件未出现在打印页面或打印预览中。有人对此有解决方案吗？ 这是我的评级控制标签

<ajaxToolkit:Rating ID="rtDriverRating" AutoPostBack="false" runat="server" MaxRating="5" StarCssClass="Star" WaitingStarCssClass="WaitingStar" EmptyStarCssClass="Star" FilledStarCssClass="FilledStar" ReadOnly="true"></ajaxToolkit:Rating>

这是我的 Javascript 打印功能：

function printdiv(printpage) {
    var headstr = "<html><head><title></title></head><body>";
    var footstr = "</body>";
    var newstr = document.all.item(printpage).innerHTML;
    var oldstr = document.body.innerHTML;
    document.body.innerHTML = headstr + newstr + footstr;
    window.print();
    document.body.innerHTML = oldstr;
    //window.location.reload();
    return false;
}

这就是我在检查页面时得到的：

<a href="javascript:void(0)" id="ContentPlaceHolder1_rtDriverRating_A" title="5" style="text-decoration:none"><span id="ContentPlaceHolder1_rtDriverRating_Star_1" class="FilledStar" style="float:left;">&nbsp;</span><span id="ContentPlaceHolder1_rtDriverRating_Star_2" class="FilledStar" style="float:left;">&nbsp;</span><span id="ContentPlaceHolder1_rtDriverRating_Star_3" class="FilledStar" style="float:left;">&nbsp;</span><span id="ContentPlaceHolder1_rtDriverRating_Star_4" class="FilledStar" style="float:left;">&nbsp;</span><span id="ContentPlaceHolder1_rtDriverRating_Star_5" class="FilledStar" style="float:left;">&nbsp;</span></a>

下面是评级控件在页面 上的显示方式Ajax 页面上的评级控件

编辑：添加我的 CSS 代码：

.Star {
    background-image: url(/Content/imgs/images/Star.gif);
    height: 17px;
    width: 17px;
}

.WaitingStar {
    background-image: url(/Content/imgs/images/WaitingStar.gif);
    height: 17px;
    width: 17px;
}

.FilledStar {
    background-image: url(/Content/imgs/images/FilledStar.gif);
    height: 17px;
    width: 17px;
}

标签： javascriptasp.netajaxajaxcontroltoolkit

解决方案

问题解决了。感谢@nuts-n-beer 在我如何强制浏览器在 CSS 中打印背景图像？ 这是因为星星被定义为背景。我必须将 no-repeat !important 添加到 css 背景属性，然后启用打印背景图形。这是我的新 CSS

.Star {
    background: url(/Content/imgs/images/Star.gif) no-repeat !important;
    height: 17px;
    width: 17px;
}

如果有人知道如何在没有用户启用打印背景图形的情况下强制显示图像，我将不胜感激。

推荐阅读