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

Question

我有一個頁面，其中包含我想要抓取和打印的 div 元素。 在 div 里面有一個包含條形碼圖像的 canvas，我也希望打印圖像。

這是頁面代碼：

<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>

這是帶有 CSS 的該頁面的預覽：

但是，每次我嘗試抓取“.trx-slip”元素時，它都不會抓取 canvas 上的圖像。

這是我用來抓取和打印元素的腳本：

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

如何讓 canvas 上的圖像也打印出來？

Answer 1

我建議將 canvas 替換為 img。 當 src 等於原始 dataUrl 時，您將把繪圖傳輸到預覽頁面並能夠打印它。

請記住，如果繪圖是原始不干凈的，則 toDataURL 方法可能會引發異常。 https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-todataurl

在您的 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;
                         });

然后繼續您的代碼。

如何在其中打印帶有 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