使用图表 js 打印图表

Question

我正在使用图表JS库来创建图表 https://www.chartjs.org/

假设我有以下代码

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

使用文件保护程序.js我能够使用以下代码保存图表

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

但我不确定如何打印图表。看不到任何本机 API 调用来执行此操作。有人可以告诉我如何实现这一目标。

我尝试使用打印HTMl元素示例中提到的jquery打印库，但它们似乎没有加载使用Chart js生成的图表。我得到一个空白页进行打印。

谢谢

Answer 1

此函数正确打印画布的内容

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

Answer 2

我能够使用jsPDF从图表打印画布.js使用下面的代码使用Chrome。这个问题已经有一个公认的答案，但正如其他人在评论中指出的那样，我无法让该解决方案与 Chrome 一起使用。

这是jsPDF文档的链接。我仍在探索这个问题，因此您可能会找到更多有用的工具来完成相同的任务。由于图表的透明背景，我不得不使用 PNG 而不是 JPEG。JPEG 只会显示为黑色。如果您想要彩色背景，请在添加图像之前添加一个与图表图像大小和位置相同的彩色矩形(文档中的矩形方法(。其他文本和功能也可以添加到您正在构建的 pdf 中。

我不喜欢必须在特定位置和大小添加图表图像，如果我找到更好的方法，我会更新这篇文章。

编辑：使用jsPDF，您可以使用pdf.save('文件名.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);
});

Answer 3

我也有类似的问题。 而且我的图表非常复杂，上面有自定义图纸。 要在纸上打印图表，您需要调用chart.resize(parentContainer.clientWidth,parentContainer.clientWidth)。 这样，图表的宽度和高度将自动更新为纸张大小。

主要问题是你什么时候打电话给上面的线路？ onBeforePrint将不起作用。我们需要使用const mediaQuery =window.matchMedia('print')然后通过mediaQuery.addEventListener("change",()=> chart.resize(parentContainer.clientWidth,parentContainer.clientWidth))将更改事件侦听器附加到它

每次用户选择不同的纸张大小或更改方向时，都会触发此事件，并且新的客户端宽度和客户端高度将更新为图表，并将在其中呈现新的尺寸