Распечатать диаграмму в Chrome build by Chart jS используя javascript - PullRequest
Новая
       6

Распечатать диаграмму в Chrome build by Chart jS используя javascript

0 голосов
/ 17 января 2019

У меня есть код ниже 

function PrintImage(id) {
    var canvas = document.getElementById(id);
    var win = window.open();
    win.document.write("<br><img src='" + canvas.toDataURL() + "'/>");
    win.print();
    win.location.reload();
}

Я пытаюсь распечатать диаграмму, которую я отображаю с помощью Chart JS Он работает в IE, но не в Chrome. Может кто-нибудь взглянуть на код и сказать мне, что я могу делать неправильно. В Chrome открывается окно печати, но оно просто белое.

Спасибо

1 Ответ

0 голосов
/ 17 января 2019

Фрагмент ниже работает на JSFiddle . Не забудьте включить всплывающие окна для Chrome, если вы хотите, чтобы ваши всплывающие окна не блокировались Chrome , взгляните на этот вопрос. 

function PrintImage() {
    id = 'chart';
    var canvas = document.getElementById(id);
    var win = window.open(canvas.toDataURL(), '_blank');
    
    win.document.write("<br><img src='" + canvas.toDataURL() + "'/>");
    win.print();
    win.location.reload();
}
 

function drawImage(){
    var ctx = $("canvas")[0].getContext("2d"),
        img = new Image();
    
    img.onload = function(){
        ctx.drawImage(img, 0, 0, 500, 500);
        $("span").text("Loaded.");
    };
    img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7udaoWuG0i57WCc7OyxkWG0jCkqMIBa7D7ff2Dk1Fk7rCsoQr";
    img.crossOrigin ="anonymous";
    $("span").text("Loading...");
}

$("#add").click(drawImage); 
$("#print").click(PrintImage);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>Canvas Replace</title>       
    </head>

    <body>
        <button id="add">Add Image</button><span></span>
        <button id= "print">Print Image</button>
        <canvas width="500" height="500" id='chart'></canvas>
    </body>
    
    
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...