如何在使用 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'