CODEWITHSUNDEEP
javascriptjqueryimageinternet-explorerprinting
Igal
Igal

Reputation: 6093

Printing an image with JS or jQuery in IE

I have an image, which is a converted to image canvas (I used canvas2image.js plugin to do that):

function draw_voucher_img()
{
    var canvas = $("#canvas_voucher")[0];
    var voucher = canvas.toDataURL();
    $("#voucher_img").attr("src", voucher);
}

Then on click of a button I want to print that image. I'm using jquery.printElement.min.js plugin to do that:

$("#div_print_voucher").click(function() {
    print_voucher();
});


function print_voucher()
{
    $("#voucher_img").printElement();
}

It works in every browser except for... Internet Explorer. In explorer it doesn't print the image, but the rest of the page. Is there any other way to make it work in IE?

**UPDATE**

Is there any other way to print an element using JS or jQuery? If there is, then maybe it's possible somehow to check if the user's browser is IE: if it is: use one printing method, if not - the function above.

*NEVER MIND, PROBLEM SOLVED*

Upvotes: 0

Views: 1291

Answers (1)

Igal
Igal

Reputation: 6093

Perhaps it's not the most elegant solution, but it worked for me. I found a piece of code for printing HTML5 canvas - it converts the canvas to image, creates a pop-up window with only <img...> tag in the body, sets the converted image as the source, pops-up the print dialog and once the print starts it closes that pop-up window. So now I only had to check if the browser is IE or some other. If it's IE - use the above mentioned code, if it's some other browser - use the function mentioned in the question. So the full code now looks like this:

function print_voucher()
{
var ua = navigator.userAgent;
if(ua.search(/MSIE/) > 0)
{
    var dataUrl = document.getElementById('canvas_voucher').toDataURL(); 
    var windowContent = '<!DOCTYPE html>';
    windowContent += '<html>'
    windowContent += '<head><title>Print voucher</title></head>';
    windowContent += '<body>'
    windowContent += '<img src="' + dataUrl + '">';
    windowContent += '</body>';
    windowContent += '</html>';
    var printWin = window.open('','','width=788,height=499');
    printWin.document.open();
    printWin.document.write(windowContent);
    printWin.document.close();
    printWin.focus();
    printWin.print();
    printWin.close();
} else {
    $("#voucher_img").printElement();
}

}

Upvotes: 1

Related Questions