random .NET and web development musings

It seems IE doesn’t print canvas elements which are absolutely positioned in the correct place. What a surprise.

This problem came about when i tried to print some of my jqPlot graphs, as it uses absolutely positioned canvas tags for the data and axes.

There’s probably a much easier solution to this, but i couldn’t find it.

Heres some mega-hax that makes things work:

Update: This requires jQuery 1.4.2+

(function($) {
	$.fn.CanvasHack = function() {
		var canvases = this.find('canvas').filter(function() {
			return $(this).css('position') == 'absolute';
		});

		canvases.wrap(function() {
			var canvas = $(this);
			var div = $('<div />').css({
				position: 'absolute',
				top: canvas.css('top'),
				left: canvas.css('left')
			});
			canvas.css({
				top: '0',
				left: '0'
			});
			return div;
		});

		return this;
	};
})(jQuery);

Call it after your graph setup code, like this:

$('body').CanvasHack();
23 COMMENTS
Joe A.
June 22, 2010
ad

I just wanted to let you know that this is really cool blog. I’m starting to use jqplot and noticed the IE printing issue and your solution saved my day. Thank you!

Joe

June 22, 2010
ad

Thanks :) Glad it helped you out!

Shu A
June 24, 2010
ad

I am new to jquery. I still can’t get this to work with IE. There must be something wrong with the way I do it. Is pasting your code in the header the right way to do it?

June 24, 2010
ad

If you open a question on http://www.stackoverflow.com I can take a look. The comment section of my blog is not the best medium for debugging.

Shu A
June 24, 2010
ad

Thanks a bunch, Andrew. Here’s my url to stackoverflow question. http://stackoverflow.com/questions/3113250/ie8-printing-issues-with-jqplot

June 24, 2010
ad

Ah, it appears my hack requires jQuery 1.4.2. I’ve updated this post and answered your question on S.O. πŸ˜‰

Shu A
June 25, 2010
ad

Thanks for the prompt reply, Andrew! It worked like a charm:)
I added ‘right: canvas.css(‘right’)’ for the Y-axis labels.

July 1, 2010
ad

Yeah, you’ll need to modify the css if youre doing anything but the default layout, easily done though :)

Mark my SO answer as accepted?

Rajeev Raina
February 15, 2011
ad

Although it works in IE8
1. But it prints the graph in 2 pages
2. Prints a blank page in Chrome.

Can you please send me a simple working example which works in IE & Chrome?

Rajeev Raina
February 17, 2011
ad

I am also using JQPLOT and want to print the same. Although I have been able to print it in IE, but in Chrome I

1. Either get the border and Axis labels (using popup approach) OR
2. Get the Graph body without Axis labels (using canvas approach)

Have you been able to find a solution?

ad

[…] http://blog.muonlab.com/2010/06/02/getting-position-absolute-canvas-elements-to-print-correctly-in-i…Getting position: absolute canvas elements to print correctly in IE […]

Glenn
October 21, 2011
ad

Just found the script and used it to fix a page of mine. I’m confused as why a fix from a year ago still hasn’t been incorporated into the jqPlot library – seeing as how they include excanvas. Oh well – thanks for the mega-hax.

ks
January 31, 2012
ad

Thanks! This works with the latest versions. It would be nice if this were integrated into the jquery plugin…..

Vipin
July 2, 2012
ad

Well i have this strange problem.
Your hack dint completely work for me :(

It shows me the entire HTML code of the canvas behind the name. any one for help…

below link to the error.

http://stackoverflow.com/questions/11291859/print-issue-with-jqplot-on-ie

shams
August 1, 2012
ad

You saved my day, this stuff works perfectly. Thanks

August 1, 2012
ad

Glad I could help :)

Upendar
October 8, 2012
ad

I am struggling for a long time on
providing the save as png/jpg functionality of JQPlot chart in IE8. Can you help me in this/ Thanks in advance..

October 9, 2012
ad

Look in the documentation of the latest examples – its fairly clear what code you need. Or try the user group?

TM
January 28, 2013
ad

finally get the code to fix this problem.. thanks a lot. πŸ˜€

shaif rizvi
May 10, 2013
ad

i am facing problem for convert jqplot canvas to image, actually i have to give export pdf functionality for ie8 browser. Todataurl is not working in ie8, pls give me code or any idea about it.

May 10, 2013
ad

Use a modern, standards compliant browser. Sorry, but that is the answer. IE doesnt work (10 almost does). Your problem is with excanvas (the canvas polyfill for IE). If anything is possible, thats what you’ll need to research.

Teja
September 30, 2013
ad

I have tried the same way mentioned in the code and comments. But still I dont get any positive result. What I see is my graph is shrinked to a very small size and the plots on the graph are plotted on the small minified graph on the left top corner. Any suggestions?

Pankaj
July 17, 2015
ad

I am trying to use jqplot and trying to print it in IE11 and I used above solution. But it is not working.

Any other issue with IE11

Post a comment