jquery - How to print canvas element by using javascript print method? - Stack Overflow

admin管理员组

文章数量:1356755

How can I print a created canvas element that has some content drawn on it using javascript? My print preview shows a blank box instead of the contents in the canvas element?

First i create my canvas image by using html2canvas, then i see that image is created. But i couldn't print the div which includes related image.

In IE i can see it when triggered button twice. In first click it opens blank print preview, in second click it opens it with related content. However in chrome it opens blank content at once, it cannot load second trigger; page freezes.

Here is my code;

function printDiv(index) {
var canvasImg = "";
var divToPrint = document.getElementById('hr'+index);
html2canvas(divToPrint, {
onrendered: function(canvas) {
var canvasImg = canvas.toDataURL("image/jpg");
$('#seckinCanvas').html('<img src="'+canvasImg+'" alt="">');
}
});

var printContent = document.getElementById("seckinCanvas");
var windowUrl = '';
var uniqueName = new Date();
var windowName = 'Print' + uniqueName.getTime();
var printWindow = window.open(windowUrl, windowName,'left=500,top=500,width=0,height=0');
printWindow.document.write(printContent.innerHTML);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}

How can I print a created canvas element that has some content drawn on it using javascript? My print preview shows a blank box instead of the contents in the canvas element?

First i create my canvas image by using html2canvas, then i see that image is created. But i couldn't print the div which includes related image.

In IE i can see it when triggered button twice. In first click it opens blank print preview, in second click it opens it with related content. However in chrome it opens blank content at once, it cannot load second trigger; page freezes.

Here is my code;

function printDiv(index) {
var canvasImg = "";
var divToPrint = document.getElementById('hr'+index);
html2canvas(divToPrint, {
onrendered: function(canvas) {
var canvasImg = canvas.toDataURL("image/jpg");
$('#seckinCanvas').html('<img src="'+canvasImg+'" alt="">');
}
});

var printContent = document.getElementById("seckinCanvas");
var windowUrl = '';
var uniqueName = new Date();
var windowName = 'Print' + uniqueName.getTime();
var printWindow = window.open(windowUrl, windowName,'left=500,top=500,width=0,height=0');
printWindow.document.write(printContent.innerHTML);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}

• javascript
• jquery
• html
• canvas

Share Improve this question Follow edited Jul 11, 2014 at 6:51 Cracker asked Jul 11, 2014 at 6:44 CrackerCracker 50077 silver badges2121 bronze badges 2

• Try it after menting printWindow.close(); There is some issue with chrome. – jsjunkie Commented Jul 11, 2014 at 6:57
• I have tried but nothing has changed. – Cracker Commented Jul 11, 2014 at 7:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Here's what worked for me (no JS needed):

1. Include a print button in the HTML:

   <a id="btn-print" onclick="print()">Print</a>

2. Add this to your CSS:

   @media print {
     // Make all your non-canvas things (divs and stuff) disappear:
     .notCanvas, .alsoNotCanvas, ... {
       display: none;
     }
     // Center your canvas (optional):
     canvas {
       padding: 0;
       margin: auto;
       display: block;
       position: absolute;
       width: 800px;
       height: 800px;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
     }
   }

This lets you print just the canvas.
I didn't cross-browser test this, but it definitely works in Chrome.

本文标签： jqueryHow to print canvas element by using javascript print methodStack Overflow