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

【问题标题】：Ajax Rating Control not appearing when printing with javascript使用 javascript 打印时未出现 Ajax Rating Control
【发布时间】：2018-10-10 09:02:38
【问题描述】：

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

&lt;ajaxToolkit:Rating ID="rtDriverRating" AutoPostBack="false" runat="server" MaxRating="5" StarCssClass="Star" WaitingStarCssClass="WaitingStar" EmptyStarCssClass="Star" FilledStarCssClass="FilledStar" ReadOnly="true"&gt;&lt;/ajaxToolkit:Rating&gt;

这是我的 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;
}

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

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

以下是评分控件在页面上的显示方式 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;
}

【问题讨论】：

这似乎是一个样式/css 问题。我认为星星是背景图像，您是否在打印预览中标记了“打印背景图像”？
是的，背景图片。我启用了背景图形，但也没有解决问题这是我的 css 代码 .Star { background-image: url(/Content/imgs/images/Star.gif);高度：17px；宽度：17px； } .WaitingStar { 背景图片： url(/Content/imgs/images/WaitingStar.gif);高度：17px；宽度：17px； } .FilledStar { 背景图像： url(/Content/imgs/images/FilledStar.gif);高度：17px；宽度：17px； }
我现在不能尝试，但我可以向你推荐一个字体很棒的替代方案，这是一个例子：codepen.io/jamesbarnett/pen/vlpkh
谢谢@Baro。你的回答对我帮助很大。缺少的部分是我必须在 css 类的背景属性中添加 no-repeat !important

标签： javascript asp.net ajax ajaxcontroltoolkit

【解决方案1】：

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

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

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

【讨论】：