首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用chart js打印图表

使用chart js打印图表
EN

Stack Overflow用户
提问于 2018-09-14 02:52:42
回答 2查看 15.6K关注 0票数 4

我正在使用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调用可以做到这一点。有人能告诉我怎么才能做到这一点吗?

我尝试使用在print an HTMl element示例中提到的jquery打印库,但它们似乎不能加载使用chart js生成的图表。我得到一张要打印的空白页。

谢谢

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-09-14 03:19:15

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

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

}
票数 1
EN

Stack Overflow用户

发布于 2019-04-24 06:26:35

我可以使用下面的代码从Chrome的chart.js中使用jsPDF打印画布。这个问题已经有了公认的答案,但正如其他人在评论中指出的那样,我无法让这个解决方案在Chrome上运行。

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

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

编辑:如果你想要一个jsPDF,你可以用pdf.save('Filename.pdf')代替FileSaver.js。

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);
});
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52320109

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档