我能够使用 jsPDF 使用下面的代码从 chart.js 和 Chrome 打印画布。这个问题已经有一个公认的答案,但正如其他人在评论中指出的那样,我无法让该解决方案与 Chrome 一起使用。
这是jsPDF 文档的链接。我仍在探索这一点,因此您可能会找到更多有用的工具来完成相同的任务。由于图表的透明背景,我不得不使用 PNG 而不是 JPEG。JPEG 只会显示为黑色。如果您想要彩色背景,请在添加图像之前添加一个与图表图像大小和位置相同的彩色矩形(文档中的 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);
});