如何使用JavaScript打印方法打印画布元素？ [英] How to print canvas element by using javascript print method?

问题描述

如何打印创建的画布元素，其中使用javascript绘制了一些内容？我的打印预览会显示一个空白框，而不是canvas元素中的内容？

首先，我使用html2canvas创建我的画布图像，然后我看到图像被创建。但我无法打印包含相关图像的div。

在 IE 中，我可以在触发按钮两次时看到它。在第一次点击它打开空白打印预览，第二次点击它与相关的内容打开它。但是，在 chrome 中，它一次打开空白内容，无法加载第二个触发器;

这是我的代码;

  function printDiv（索引）{
 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 ='打印'+ 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（）; 
} 
  

解决方案

不需要JS）：

1. 在HTML中包含打印按钮：

   
   
   

    &＃x3C; a id =&x22; btn-print&＃x22; onclick =&x22; print（）&＃x22;&＃x3E;打印&＃x3C; / a&＃x3E; 




2. 添加到您的CSS：
   
   

     @media print {
    / /使所有非帆布的东西（div和东西）消失：
    .notCanvas，.alsoNotCanvas，... {
    display：none; 
   } 
    //将画布居中（可选）：
   画布{
    padding：0; 
    margin：auto; 
    display：block; 
   位置：绝对; 
    width：800px; 
    height：800px; 
    top：0; 
    bottom：0; 
   剩下：0; 
    right：0; 
    
   } 

这可以让您只打印画布。

我没有跨浏览器测试这个，但它绝对适用于Chrome。

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();
}

解决方案

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.

这篇关于如何使用JavaScript打印方法打印画布元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！