Question

我的图表显示在页面上，但不是在我打印该页面时。

html（检查打印元素）：

<div class="stat1">
        <div class="block">
            <div class="head"></div>
            <br>
            <div class="data">
                <div id="chart-2" style="padding: 0px; position: relative;"><canvas class="base" width="980" height="882"></canvas><canvas class="overlay" width="980" height="882" style="position: absolute; left: 0px; top: 0px;"></canvas><div class="tickLabels" style="font-size:smaller"><div class="xAxis x1Axis" style="color:whitesmoke"><div class="tickLabel" style="position:absolute;text-align:center;left:-24px;top:862px;width:122px">0.0</div><div class="tickLabel" style="position:absolute;text-align:center;left:110px;top:862px;width:122px">0.5</div><div class="tickLabel" style="position:absolute;text-align:center;left:244px;top:862px;width:122px">1.0</div><div class="tickLabel" style="position:absolute;text-align:center;left:378px;top:862px;width:122px">1.5</div><div class="tickLabel" style="position:absolute;text-align:center;left:512px;top:862px;width:122px">2.0</div><div class="tickLabel" style="position:absolute;text-align:center;left:646px;top:862px;width:122px">2.5</div><div class="tickLabel" style="position:absolute;text-align:center;left:780px;top:862px;width:122px">3.0</div><div class="tickLabel" style="position:absolute;text-align:center;left:914px;top:862px;width:122px">3.5</div></div><div class="yAxis y1Axis" style="color:#3f3f3f"><div class="tickLabel" style="position:absolute;text-align:right;top:847px;right:948px;width:32px">0</div><div class="tickLabel" style="position:absolute;text-align:right;top:762px;right:948px;width:32px">10</div><div class="tickLabel" style="position:absolute;text-align:right;top:677px;right:948px;width:32px">20</div><div class="tickLabel" style="position:absolute;text-align:right;top:591px;right:948px;width:32px">30</div><div class="tickLabel" style="position:absolute;text-align:right;top:506px;right:948px;width:32px">40</div><div class="tickLabel" style="position:absolute;text-align:right;top:421px;right:948px;width:32px">50</div><div class="tickLabel" style="position:absolute;text-align:right;top:336px;right:948px;width:32px">60</div><div class="tickLabel" style="position:absolute;text-align:right;top:251px;right:948px;width:32px">70</div><div class="tickLabel" style="position:absolute;text-align:right;top:165px;right:948px;width:32px">80</div><div class="tickLabel" style="position:absolute;text-align:right;top:80px;right:948px;width:32px">90</div><div class="tickLabel" style="position:absolute;text-align:right;top:-5px;right:948px;width:32px">100</div></div></div><div class="legend"><div style="position: absolute; width: 444px; height: 22px; top: -20px; right: 0px; opacity: 1;"> </div><table style="position:absolute;top:-20px;right:0px;;font-size: 11px; color:#3f3f3f"><tbody><tr><td class="legendColorBox"><div style="#DDD"><div style="width:15px;height:0;border:3px solid #4B8863;overflow:hidden"></div></div></td><td class="legendLabel"><span>1-15 Age(26.9%)</span></td><td class="legendColorBox"><div style="#DDD"><div style="width:15px;height:0;border:3px solid #648DA0;overflow:hidden"></div></div></td><td class="legendLabel"><span>16-30 Age(38.5%)</span></td><td class="legendColorBox"><div style="#DDD"><div style="width:15px;height:0;border:3px solid #A0927E;overflow:hidden"></div></div></td><td class="legendLabel"><span>31-50 Age(11.5%)</span></td><td class="legendColorBox"><div style="#DDD"><div style="width:15px;height:0;border:3px solid #757B7C;overflow:hidden"></div></div></td><td class="legendLabel"><span>50+ Age(23.1%)</span></td></tr></tbody></table></div></div>
            </div>
        </div>
        <p id="pstyle">1-15                                  16-30                                 31-50                                  51+</p>
</div>

html（在页面中）：

<div class="stat1">
        <div class="block">
            <div class="head"></div>
            <br>
            <div class="data">
                <div id="chart-2"></div>
            </div>
        </div>
        <p id="pstyle">1-15&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;16-30&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;31-50&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;51+</p>
</div>

打印功能：

w=window.open('','printview');
w.document.write('\x3Cscript type="text/javascript" src="../../js/plugins/jflot/jquery.flot.js">\x3C/script>');
w.document.write('\x3Cscript type="text/javascript" src="../../js/plugins/jflot/jquery.flot.resize.js">\x3C/script>');

w.document.write("<link rel='stylesheet' type='text/css' href='../../Extra/Reports Pages/Print.css'>");
w.print();

打印css：

#chart-2
{
    height: 900px !important;
    width: 982px !important;
}
#pstyle
{
    margin-top: 0px;
    margin-left: 41px;
    position: absolute;
}
.block
{
    background: whitesmoke;
    width: 599px;
}
.stat1
{
    height: 300px;
}
.base
{
    width: 1047px;
    height: 793px;
    z-index: 1;
    margin-top: -793px;
}
.overlay
{
    position: absolute;
    left: 0px;
    top: 0px;
}
.tickLabels
{
    font-size:smaller;
}

也许java脚本文件没有到达打印页面。在检查元素中存在画布仍然无法看到图形。

Answer 1

这帮助了我。

将html画布中显示的内容捕获为图像。

var canvas = document.getElementById("mycanvas");
or
var canvas = $('#mycanvas')[0];

var img    = canvas.toDataURL("image/png");

使用IMG中的值，您可以将其写为新图像，如下所示：

document.write('<img src="'+img+'"/>');

图形不显示在打印Flot.js上

1 个答案: