Question

我正在使用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生成的图表。我得到一张空白页进行打印。

谢谢

Answer 1

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

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

我不喜欢必须在特定位置和大小处添加图表图像，如果我发现更好的方法，则会更新此帖子。

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

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);
});

使用图表JS打印图表

1 个答案: