Распечатать диаграмму с помощью диаграммы js

Я использую библиотеку 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. Я получаю пустую страницу для печати.

Спасибо

Возможный дубликат Как распечатать только выбранный HTML-элемент?

Goodbye StackExchange 13.09.2018 20:55

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

SP1 13.09.2018 21:08
3
2
14 573
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

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

}

Не работает в Chrome, просто открывает новую пустую страницу вкладки!

Antonios Tsimourtos 21.03.2019 20:30

См. Ответ Мартина МакКэлли в stackoverflow.com/questions/12809971/quick-print-html5-canva‌ s

sureshvv 23.12.2020 18:04

Я смог использовать 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);
});

См. Ответ Мартина МакКэлли в stackoverflow.com/questions/12809971/quick-print-html5-canva‌ s

sureshvv 23.12.2020 18:04

Другие вопросы по теме