javascript - 使用chart js打印图表

标签 javascript jquery chart.js chartjs-2.6.0

我正在使用 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");
    });
}

但我不知道如何打印图表。没有看到任何 native API 调用来执行此操作。有人可以告诉我如何实现这一目标吗?

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

谢谢

最佳答案

此函数正确打印 Canvas 的内容

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

}

关于javascript - 使用chart js打印图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52320109/

相关文章:

javascript - 如何在鼠标不动时使功能起作用?

javascript - Rails 服务器返回 HTML 而不是 JavaScript

javascript - 日本字 rune 件名在文件上传php时变成未命名文件

jquery - 根据邻近度批量分配链接属性

javascript - 导航菜单以不同的高度向下滚动

javascript - 使用 Ember 的 bindAttr 时的 SafeStrings?

javascript - Owl Carousel - 宽度计算错误

javascript - 如何在 Chart.js 中更改标签和值,例如 500,000 到 500k?

javascript - 如何使用 Chart.js 在堆叠条形图中显示内联值?

javascript - 无法弄清楚如何使用 Chart.js 跳过 x 轴上的第一个数据点和 X 轴上的标签跳过倒数第二个数据点