Распечатать диаграмму, используя диаграмму JS - PullRequest
Новая
       15

Распечатать диаграмму, используя диаграмму JS

0 голосов
/ 13 сентября 2018

Я использую библиотеку Chart JS для создания диаграмм https://www.chartjs.org/

Скажите, у меня есть код ниже 

 <div class="card-body ">
        <canvas id="bidStatus"></canvas>
  </div>

Используя FileSaver.js, я могу сохранить график, используя приведенный ниже код 

function DownloadImage() {
    $("#bidStatus").get(0).toBlob(function (blob) {
        saveAs(blob, "BidStatus.png");
    });
}

Но я не уверен, как можно распечатать диаграмму. Не вижу никакого вызова API для этого. Может кто-нибудь, пожалуйста, скажите мне, как я могу достичь этого.

Я попытался использовать библиотеки печати jquery, которые упоминаются в примере «Печать элемента HTMl», но, похоже, они не загружают диаграмму, созданную с помощью Chart js. Я получаю пустую страницу для печати. ​​

Спасибо

Ответы [ 2 ]

0 голосов
/ 24 апреля 2019

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

Вот ссылка на документацию jsPDF . Я все еще исследую это, чтобы вы могли найти более полезные инструменты для выполнения той же задачи. Мне пришлось использовать PNG вместо JPEG из-за прозрачного фона диаграммы. JPEG будет выглядеть только черным. Если вы хотите цветной фон, добавьте цветной прямоугольник (метод rect в документах), который имеет тот же размер и положение изображения диаграммы, прежде чем добавлять изображение. Другой текст и функции также могут быть добавлены в PDF-файл, который вы создаете.

Мне не нравится, что изображение диаграммы нужно добавлять в определенном месте и размере, и я обновлю этот пост, если найду лучший способ сделать это.

РЕДАКТИРОВАТЬ: С jsPDF вы можете использовать pdf.save ('Filename.pdf'), чтобы заменить FileSaver.js, если вы хотите PDF.

HTML 

<button id="print-chart-btn">Print Chart</button>
<div class="canvas-container">
    <canvas id="random-chart" ></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/jspdf@1.5.3/dist/jspdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

JAVASCRIPT 

$('#print-chart-btn').on('click', function() {
    var canvas = document.querySelector("#random-chart");
    var canvas_img = canvas.toDataURL("image/png",1.0); //JPEG will not match background color
    var pdf = new jsPDF('landscape','in', 'letter'); //orientation, units, page size
    pdf.addImage(canvas_img, 'png', .5, 1.75, 10, 5); //image, type, padding left, padding top, width, height
    pdf.autoPrint(); //print window automatically opened with pdf
    var blob = pdf.output("bloburl");
    window.open(blob);
});
0 голосов
/ 13 сентября 2018

Эта функция печатает содержимое холста правильно 

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

}
...