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

Question

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

功能如下；该图表是使用标准的chartjs对象构建的。该网站是用bootstrap 4构建的。

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

Answer 1

您可以在点击时尝试preventDefault((

应该是

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

Answer 2

对于TS Angular，恢复：

import * as FileSaver from 'file-saver'

至

import FileSaver from 'file-saver'