我正在尝试打印我的图表，它可以通过 Firefox 和 Chrome 正确打印。
但如果我尝试用 IE 打印它，它会向我显示图表后面的图表画布 HTML 标签。正如你在图片中看到的那样。并且它还将图表轴文本放置在整个图表上..:(
我尝试了下面的解决方案，它说它解决了问题，但它对我来说没有:(
http://blog.muonlab.com/2010/06/02/getting-position-absolute-canvas-elements-to-print- Correctly-in-ie/
下面是问题的截图。
HTML
<!doctype html>
<html lang="en" class="no-js master">
<head>
<!-- jQuery Flot Graph Widget. exCanvas.js needed for IE -->
<link class="include" rel="stylesheet" type="text/css" href="/css/jquery.jqplot.css" />
<!-- End additional plugins --><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/js/excanvas.min.js"></script><![endif]-->
<script class="include" type="text/javascript" src="/js/jquery.jqplot.min.js"></script>
<!-- Additional plugins go here -->
<script class="include" type="text/javascript" src="/js/jqplot/jqplot.canvasTextRenderer.min.js"></script>
<script class="include" type="text/javascript" src="/js/jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script class="include" type="text/javascript" src="/js/jqplot/jqplot.canvasAxisTickRenderer.min.js"></script>
<script class="include" type="text/javascript" src="/js/jqplot/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="/js/jqplot/jqplot.barRenderer.min.js"></script>
</head>
<body>
<div id="mainCont"> </div>
</body>
</html>
JSON数据
{
"graphData":[["06-2011",20.0],["07-2011",0.0],["09-2011",0.0],["10-2011",0.0],["11-2011",100.0],["12-2011",0.0],["01-2012",0.0],["02-2012",0.0],["03-2012",0.0],["04-2012",0.0],["05-2012",0.0]], "yAxisLabel" : "Data per month", "graphTitle" : "12 month "}
JS code
$('.print', context).live("click", function(e) {
printGraph(data.graphData, data.yAxisLabel, data.graphTitle);
}
function printGraph(graphData, yAxisLabel, graphTitle){
var graphWrapper = $(document.createElement('div'));
graphWrapper.attr('id', 'edd-graph').css('width','490px');
var graphID = graphWrapper.attr('id');
$('#mainCont').append(graphWrapper);
var plot = $.jqplot(graphID, [graphData], {
series:[{renderer:$.jqplot.BarRenderer}],
seriesDefaults: {shadow: false,
rendererOptions: {barWidth:20}
},
seriesColors: [ "rgba(255, 81, 82, 1)" ],
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
label: '',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
max:90,
min:10,
tickOptions: {
angle: -45,
fontFamily: 'arial',
fontSize: '7.2pt'
}
},
yaxis: {
label: yAxisLabel,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: {
fontFamily: 'arial',
fontSize: '8.5pt'
},
tickOptions: {
fontFamily: 'arial',
fontSize: '7.2pt'
}
}
},
grid: {
drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: '#efefef', // *Color of the grid lines.
background: '#ffffff', // CSS color spec for background color of grid.
borderColor: '#999999', // CSS color spec for border around grid.
borderWidth: 0.2, // pixel width of border around grid.
shadow: false
}
});
}
我找到了解决这个恼人问题的方法。原来是链接到 StackOverflow 上类似问题的另一个答案.
解决方案的直接链接在这里。
我已经验证过并且效果很好。以下是我构建的示例，用于展示实际的黑客行为。在适当的版本中打开示例IE（浏览器模式设置为 IE7 或 IE8 时为 7、8 或 9）然后尝试打印预览，您将看到差异：
PS:请毫不犹豫地给@user1065335 +1，我找到了它，干得好，伙计:)