Question

我在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 Rating control on the page

编辑：添加我的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;
}

Answer 1

问题解决了。感谢@ nuts-n-beer在主题How can I force browsers to print background images in CSS? 中的回答这是因为星星被定义为背景。我必须在css background属性中添加no-repeat！important，然后启用打印背景图形。这是我的新CSS

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

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

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

1 个答案: