我正在使用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调用来做这件事。有人能告诉我如何才能做到这一点吗?
我尝试使用在打印HTMl元素示例中提到的jquery打印库,但它们似乎无法加载使用Chart js生成的图表。我得到了一个空白页用于打印。
谢谢
3条答案
按热度按时间fykwrbwg1#
我可以使用jsPDF在chart.js中打印一个画布,使用下面的代码。这个问题已经有了一个公认的答案,但是正如其他人在评论中指出的,我不能让这个解决方案在Chrome中工作。
这里有一个jsPDF documentation的链接。我还在探索这个链接,以便您可以找到更有用的工具来完成相同的任务。我不得不使用PNG而不是JPEG,因为图表的背景是透明的。JPEG只会显示为黑色。如果您想要彩色背景,在添加图像之前,添加一个与图表图像大小和位置相同的彩色矩形(文档中的rect方法)。其他文本和功能也可以添加到您正在构建的pdf中。
我不喜欢图表图像必须添加在一个特定的位置和大小,并会更新这篇文章,如果我找到一个更好的方式这样做。
编辑:使用jsPDF,您可以使用pdf.save('Filename.pdf')来替换FileSaver.js,前提是您需要一个PDF。
HTML语言
Java脚本
41zrol4v2#
此函数用于正确打印画布的内容
mmvthczy3#
我也遇到过类似的问题。我的图表非常复杂,上面有自定义的图形。要在纸上打印图表,你需要调用
chart.resize(parentContainer.clientWidth,parentContainer.clientWidth)
。这样图表的宽度和高度将自动更新为纸张大小。主要问题是何时调用上面的行?onBeforePrint将不起作用。我们需要使用
const mediaQuery =window.matchMedia('print')
,然后通过mediaQuery.addEventListener("change",()=> chart.resize(parentContainer.clientWidth,parentContainer.clientWidth))
将change Event Listener附加到它每次用户选择不同的纸张大小或更改方向时,都会触发此事件,并且新的clientwidth和clientHeight将更新为图表,并在其中呈现新的维度