javascript - 如何使用 filesaver.js 和 canvas-toBlob.js 防止文件保存后页面刷新

Question

我在 js/jquery 中实现了一个小功能来创建一个保存文件按钮，允许用户将在 chart.js 中制作的图表保存到他们的系统中。但是，当单击按钮时，页面会刷新并返回顶部。我已经查看了我的其余代码，并没有发现任何其他会导致这种情况发生的情况。如何防止这种行为？

功能如下；该图表是使用标准 chartjs 对象构造的。该站点是使用引导程序 4 构建的。

$('#save-btn').on('click', function() {
    $('#printBarChart').get(0).toBlob(function(blob) {
        saveAs(blob, "combined_bar_chart.png");
    });
});

标签： javascriptjquerybootstrap-4filesaver.js

Answer 1

您可以在该点击上尝试 preventDefault()

应该

$('#save-btn').on('click', function(e) {
    $('#printBarChart').get(0).toBlob(function(blob) {
        saveAs(blob, "combined_bar_chart.png");
        e.preventDefault();
    });
});