如何在其中打印带有 canvas 的 div 元素

Question

I have a page that contains div elements I want to grab and print.我有一个页面，其中包含我想要抓取和打印的 div 元素。 And inside the div there is a canvas that contain a barcode image, and I want the image to be printed as well.在 div 里面有一个包含条形码图像的 canvas，我也希望打印图像。

Here is the page code:这是页面代码：

<div data-v-78bfab32="" class="trx-slip" data-testid="trx-print-slip-2892470852">
<div class="row"> SOME LOGO HERE</div>
    <div data-testid="trx-info-booking-code">
    <hr>
        <div class="row section-logistic-booking">
        <canvas data-testid="trx-barcode" class="barcode" width="166" height="65"></canvas>
            <div>TEXT 1
            </div>
                <div class="c-trx-slip--font-large">TEXT 2
                </div>
                <div class="c-trx-slip--notice-outset">
                    <div class="u-txt--upcase u-txt--bold">TEXT 3 
                    </div>
                </div>
        </div>
    </div>

And this is the preview of that page with CSS:这是带有 CSS 的该页面的预览：

However, every time I try to grab the ".trx-slip" element, it wouldn't grab the image on the canvas.但是，每次我尝试抓取“.trx-slip”元素时，它都不会抓取 canvas 上的图像。

This is the script i use to grab and print the element:这是我用来抓取和打印元素的脚本：

function printAll(){
var containers = document.querySelectorAll(".trx-slip");
if(!containers){
    alert("Nothing to print");
}
var content = "";
for(var i =0; i < containers.length; i++){
    var addEOL = i + 1 != containers.length;
    content = content + addWrapperDiv(containers[i].outerHTML, addEOL);
}
print(content);
}

function print(content){
var mywindow = window.open('', 'Print', 'height=600,width=800');
mywindow.document.write('<html><head><title>Print</title>');
mywindow.document.write(getCssPart());
mywindow.document.write('</head><body >');
mywindow.document.write(content);
mywindow.document.write('</body></html>');

mywindow.document.close();
mywindow.focus();
mywindow.onload = function(){
mywindow.print();
mywindow.close();
}
}
function addWrapperDiv(content,  addEOL = true){
content = '<div class=".trx-slip">' + content + '</div>';
if(addEOL){
    content = content + '<p style="page-break-after: always" />';
}
return content;
}

function getCssPart(){
var links = document.querySelectorAll("link,style");
var link = "";
for(var i =0; i < links.length; i++){
    link += links[i].outerHTML.replace(/@page[^}]+}/gm,'');
}
return link;
}
printAll();

How to get the image on the canvas to print as well?如何让 canvas 上的图像也打印出来？

Answer 1

I would suggest to replace canvas for img.我建议将 canvas 替换为 img。 With src equals to original dataUrl you will transfer drawing to the preview page and will be able to print it.当 src 等于原始 dataUrl 时，您将把绘图传输到预览页面并能够打印它。

Keep in mind that toDataURL method may throw an exception if drawing is origin-unclean.请记住，如果绘图是原始不干净的，则 toDataURL 方法可能会引发异常。 https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-todataurl https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-todataurl

In your printAll function collect clones of containers and replace canvas with img在您的 printAll function 中收集容器的克隆并用 img 替换 canvas

var containers = [...document.querySelectorAll(".trx-slip")]
                         .map((el)=>{ 
                            var cl = el.cloneNode(true);
                            var cvs = cl.querySelector(".barcode");
                            var dataUrl = cvs.toDataUrl();
                            var img = document.createElement("img");
                            img.src = dataUrl;
                            // set size?
                            cvs.parentElement.replaceChild(img,cvs);
                            return cl;
                         });

then continue with your code.然后继续您的代码。

如何在其中打印带有 canvas 的 div 元素

问题描述

1 个解决方案

解决方案1
0 2020-07-20 08:10:48

如何在其中打印带有 canvas 的 div 元素

问题描述

1 个解决方案

解决方案1 0 2020-07-20 08:10:48

解决方案1
0 2020-07-20 08:10:48