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

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

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

该功能在下面；该图表是使用标准chartjs对象构造的。该网站是使用Bootstrap 4构建的。

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

解决方法

您可以在该点击上尝试preventDefault（）

应该是

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

,

对于 TS Angular，还原：

import * as FileSaver from 'file-saver'

到

import FileSaver from 'file-saver'