Question

我正在尝试打印我的图表，并通过Firefox和Chrome正确打印。

但是如果我尝试用IE打印它，它会向我显示图形背后的图形画布HTML标签。正如你在图像中看到的那样。并且它还在图表上放置了图形轴文本.. :(

我尝试了下面的解决方案，它说它解决了这个问题但它适合我:(

http://blog.muonlab.com/2010/06/02/getting-position-absolute-canvas-elements-to-print-correctly-in-ie/

下面的问题截图。

IE issue when jqplot is printed

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代码

$('.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
            }

        });
    }

Answer 1

我遇到了这个烦人问题的解决方案。实际上是linked in another answer to a similar issue on StackOverflow。

The direct link to the solution is here.

我已经验证了它并且效果很好。以下是我为展示行动中的黑客而制作的示例。使用适当版本的IE打开示例（7,8或9，浏览器模式设置为IE7或IE8），然后尝试打印预览，您将看到差异：

PS： 请毫不犹豫地给@ user1065335 +1，我做了，找到它，好伙伴:)

Answer 2

我们在网站上使用Mordernizr获取HTML5支持。并优化代码而不是采取整个mordernizr文件。我们创建了一个自定义的Mordernizr文件。

问题就在那里，我们忘了从那里包含PRINTSHIV复选框，那就是把它搞砸了。）

这是有效的链接并解决了这个问题。

这已经搁置了很长时间。刚刚解决了，我很高兴。

还要感谢BORO的回答，这有助于你不要使用Mordernizr。

工作

CUSTOM MORDERNIZR

在IE上打印JQplot的问题

2 个答案: