Javascript 使用chart js打印图表

我正在使用ChartJS库创建图表

假设我有下面的代码

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

但我不确定如何打印图表。没有看到任何本机API调用来执行此操作。有人能告诉我如何做到这一点吗

---

我尝试使用jquery打印库，这在print-a-HTMl元素示例中提到过，但它们似乎没有加载使用chart-js生成的图表。我有一张空白页要打印

---

谢谢

此功能可正确打印画布的内容

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

}

函数PrintImage（）{ var canvas=document.getElementById（“bidStatus”）； var win=window.open（）； win.document.write（“
”）； win.print（）； win.location.reload（）； }

---

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

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

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

编辑：使用jsPDF，您可以使用pdf.save（'Filename.pdf'）替换FileSaver.js，前提是您需要pdf

HTML

---

可能重复我尝试使用jquery打印库，这在打印HTMl元素示例中提到，但它们似乎没有加载使用chart js生成的图表。我得到一个空白页用于打印。不使用Chrome，只打开一个新的选项卡空白页！参见中的马丁·麦卡利的答案参见中的马丁·麦卡利的答案

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

}

<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>

$('#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);
});