使用chart js打印图表

SP1*_*SP1 5 javascript jquery chart.js chartjs-2.6.0

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

假设我有下面的代码

 <div class="card-body ">
        <canvas id="bidStatus"></canvas>
  </div>
Run Code Online (Sandbox Code Playgroud)

使用 FileSaver.js 我可以使用下面的代码保存图表

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

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

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

谢谢

SP1*_*SP1 3

此函数正确打印 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();

}
Run Code Online (Sandbox Code Playgroud)

  • 无法在 Chrome 中工作,只是打开一个新选项卡空白页! (4认同)