javascript - Print page using html2canvas - Stack Overflow

admin管理员组

文章数量:1240993

I'm building a print page function on my web using html2canvas.

function printthispage() {

    html2canvas($("#mydiv"), {
        onrendered: function (canvas) {
            var myImage = canvas.toDataURL("image/png");
            var printWindow = window.open(myImage);                        
            printWindow.document.close();
            printWindow.focus();
            printWindow.print();
            printWindow.close();
        }
    });
}

However the window opened and closed immediately. I've tried removing close(), the image showed on new window but no print function was triggered. Is there something wrong?

I'm building a print page function on my web using html2canvas.

function printthispage() {

    html2canvas($("#mydiv"), {
        onrendered: function (canvas) {
            var myImage = canvas.toDataURL("image/png");
            var printWindow = window.open(myImage);                        
            printWindow.document.close();
            printWindow.focus();
            printWindow.print();
            printWindow.close();
        }
    });
}

However the window opened and closed immediately. I've tried removing close(), the image showed on new window but no print function was triggered. Is there something wrong?

• javascript
• html
• html2canvas

Share Improve this question Follow edited Nov 16, 2017 at 5:45 ydoow asked Oct 27, 2014 at 9:41 ydoowydoow 3,00644 gold badges2727 silver badges4141 bronze badges 3

• Seems to work without the close jsfiddle/dsf4wwkL – artm Commented Oct 27, 2014 at 9:47
• Have you tried the link I sent? – artm Commented Oct 27, 2014 at 11:55
• yes but it's not working for my case – ydoow Commented Oct 27, 2014 at 12:03

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 6

Try this,it will work:

html2canvas($("#mydiv"), {
    onrendered: function(canvas) {
        var myImage = canvas.toDataURL("image/png");
        var tWindow = window.open("");
        $(tWindow.document.body)
            .html("<img id='Image' src=" + myImage + " style='width:100%;'></img>")
            .ready(function() {
                tWindow.focus();
                tWindow.print();
            });
    }
});

Vanilla JS solution

// render HTML to canvas based on target element
html2canvas(document.querySelector('<YOUR SELECTOR>'), {

  // if the canvas is rendered
  onrendered: function (canvas) {

    // create a new window
    var nWindow = window.open('');

    // append the canvas to the body
    nWindow.document.body.appendChild(canvas);

    // focus on the window
    nWindow.focus();

    // print the window
    nWindow.print();

    // reload the page
    location.reload();
  }
});

Finally I figure out the solution. The previous handling I used should be made into 2 parts.

1) use html2canvas to render the page into image and store it in a hidden div, when the page is loaded.

html2canvas(divprint, {
    onrendered: function(canvas) {
        var canvasImg = canvas.toDataURL("image/jpg");
        $('#divhidden').html('<img src="'+canvasImg+'" alt="">');
    }
});

2) Once a print button is clicked, open a new window, write the stored div content and jquery function for printing when the loading is done.

$("#printbutton").click(function(e){
    var printContent = document.getElementById("divhidden");
    var printWindow = window.open("", "","left=50,top=50");                
    printWindow.document.write(printContent.innerHTML);
    printWindow.document.write("<script src=\'http://code.jquery./jquery-1.10.1.min.js\'><\/script>");
    printWindow.document.write("<script>$(window).load(function(){ print(); close(); });<\/script>");
    printWindow.document.close();                
})

I done this

function myprint() {
    html2canvas(jQuery('div.cart'), { // replace div.cart with your selector
        onrendered: function (canvas) {
            var myImage = canvas.toDataURL("image/png");
            var tmp = document.body.innerHTML;

            document.body.innerHTML = '<img src="'+myImage+'" alt="">';

            var printWindow = window.print();
            document.body.innerHTML = tmp;
        }
    });
}

 try this code, it is working.                                      

<div id="mydiv">asdasfadsadfasfd</div>
    <script>
        html2canvas($("#mydiv"), {
            onrendered: function (canvas) {
               var myImage = canvas.toDataURL("image/png");
               var printWindow = window.print(myImage);                                          

            }
        });
    </script>

html2canvas(document.querySelector("#mydiv")).then(canvas => {
            var myImage = canvas.toDataURL("image/png");
            var tWindow = window.open("");
            $(tWindow.document.body)
                .html("<img id='Image' src=" + myImage + " style='width:100%;'></img>")
                .ready(function() {
                    tWindow.focus();
                    tWindow.print();
                });
    });

本文标签： javascriptPrint page using html2canvasStack Overflow