Print issue with JQplot on IE

I am trying to print my graph and it prints properly through Firefox and Chrome.

But if i try to print it with IE, it shows me the graph canvas HTML tags behind the graph. as u seen in the image. and also it placed the graph axis text all over the graph.. :(

i tried the below solution which says it resolves the issue but it dint for me :(

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

below screenshot of the issue.

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 Data

{
"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
            }

        });
    }

Boro

I came across a solution for this annoying problem. It was actually linked in another answer to a similar issue on StackOverflow.

The direct link to the solution is here.

I have verified it and it works great. Here are the samples I built to show the hack in action. Open the samples in appropriate version of IE (7, 8 or 9 with the browser mode set to IE7 or IE8) then try print preview and you will see the difference:

PS: Please do not hesitate to give @user1065335 a +1, I did, for finding it, good job mate :)

Well we were using a Mordernizr for the HTML5 support in our site. and to optimize the code instead of taking the entire mordernizr file. We created a custom Mordernizr file.

That is wat where the issue was, we forgot to include the PRINTSHIV checkbox from there, thats wat screwed it up :)

well this is the link which worked and resolved this issue.

This was on hold for a long time. Just got it resolved yesterday and am so Glad.

Also like to thank BORO for his answer, that works to incase u dont user Mordernizr.

CUSTOM MORDERNIZR which worked

来源：https://stackoverflow.com/questions/11291859/print-issue-with-jqplot-on-ie

标签

internet-explorer