Internet explorer 在IE上使用JQplot打印问题_Internet Explorer_Canvas_Printing_Jqplot

Internet explorer 在IE上使用JQplot打印问题

internet-explorer canvas printing

Internet explorer 在IE上使用JQplot打印问题,internet-explorer,canvas,printing,jqplot,Internet Explorer,Canvas,Printing,Jqplot,我正在尝试打印我的图形，它通过Firefox和Chrome正确打印但是如果我尝试用IE打印它，它会显示图形后面的graph canvas HTML标记。如图所示。它还将图形轴文本放置在整个图形上..：( 我尝试了下面的解决方案，它说它解决了这个问题，但它对我没有帮助：( 下面是问题的截图 HTML <!doctype html> <html lang="en" class="no-js master"> <head> &l

我正在尝试打印我的图形，它通过Firefox和Chrome正确打印

但是如果我尝试用IE打印它，它会显示图形后面的graph canvas HTML标记。如图所示。它还将图形轴文本放置在整个图形上..：(

我尝试了下面的解决方案，它说它解决了这个问题，但它对我没有帮助：(

下面是问题的截图

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>

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
            }

        });
    }

我想出了一个解决这个恼人问题的办法。实际上是

我已经对其进行了验证，效果非常好。以下是我为展示黑客行为而制作的示例。在适当版本的

IE

中打开示例（7、8或9，浏览器模式设置为IE7或IE8），然后尝试打印预览，您将看到不同之处：

PS:请不要犹豫，给@user1065335一个+1，我找到了，很好的工作伙伴：）

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

这就是问题所在，我们忘了在那里包括PRINTSHIV复选框，这是wat搞砸了：）

这就是解决这个问题的纽带

这件事被搁置了很长时间。昨天刚刚解决了，我很高兴

我还要感谢博罗的回答，以防你不使用摩德尼

哪一个有效

您需要发布您的标记和javascript，以便任何人都能提供帮助IE的版本是什么？如果低于9，那么您是否记得导入

excanvas.js

as。否则，请制作一个样本来说明您的问题。@Boro：我目前正在使用IE8，是的，我已经包括了excanvas。js@AndrewBullock当前位置只有当我通过IE打印页面时，问题才会出现。我认为只有这样才有问题。但是我可以安排一个单独的文件。我现在也添加了代码。希望这有帮助：）但我确实需要帮助：）这个力对我有用：（当我打印图表时，我仍然可以看到图表后面的垃圾IE@nipiv你能用你的代码构建一个，然后我可以试试。但我怀疑它是否应该与任何特定的代码相关。我很惊讶它对你不起作用，但可能是因为你使用了实际的IE7，而我在IE9上只使用了IE7模式？嘿，老兄，非常感谢你答案是这样的。但我刚刚解决了这个问题。这是一件非常愚蠢的事情，它不需要canvashack。我正在使用Mordernizer，我的一位同事通过只包含我们网站中所需的内容而将其添加到定制的Mordernizer文件中，而我们没有在其中包含PRINTSHIV选项。这个错误被搁置了很长一段时间我。但我测试了你的答案，它也很有效，如果你不使用mordernizr，那就是最好的答案。@user1065335:谢谢。

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

        });
    }