js的FileSaver.saveAs()方法:监听保存进度，进度条等方法

在使用FileSaver.saveAs保存表格到本地时，如果想要获取导出/保存进度可以如下操作

FileSaver.js的saveAs()方法是一个异步操作，它将文件保存到用户设备上。在调用saveAs()方法后，可以通过使用回调函数、Promise、或监听相关事件来确定saveAs()方法何时执行完毕。

1.使用回调函数：saveAs()方法接受一个可选的回调函数作为参数，该回调函数在保存操作完成时被调用。

const file = new Blob(['Hello, world!'], { type: 'text/plain;charset=utf-8' });
saveAs(file, 'example.txt', () => {
  console.log('保存完成');
});

在回调函数中，你可以执行一些其他操作或通知用户保存操作已经完成。

2.使用Promise：在一些支持Promise的环境中，可以使用Promise来包装saveAs()方法，以便在操作完成后进行处理。

const file = new Blob(['Hello, world!'], { type: 'text/plain;charset=utf-8' });
const savePromise = new Promise((resolve, reject) => {
  saveAs(file, 'example.txt', resolve);
});

savePromise.then(() => {
  console.log('保存完成');
});

可以使用Promise的then()方法在保存完成后执行相应的操作。

3.监听事件：FileSaver.js还提供了一些自定义事件，可以通过监听这些事件来获取保存操作的状态。

1. write: 当数据被写入到文件中时触发。

2. progress: 在数据写入过程中触发，可以用于获取保存进度。

3. abort: 当保存操作被中止时触发。

4. error: 当保存操作出现错误时触发。

5. complete: 当保存操作完成时触发，相当于执行完回调函数或Promise的resolve。

const file = new Blob(['Hello, world!'], { type: 'text/plain;charset=utf-8' });
saveAs(file, 'example.txt');

FileSaver.onwriteend = function() {
  console.log('保存完成');
};

通过监听onwriteend事件，可以在保存完成时执行相应的操作。

根据你的需求和使用环境选择适合的方式来确定saveAs()方法的执行完成时间。需要注意的是，保存操作的完成时间可能受到浏览器、网络速度和文件大小等因素的影响。

• 对于FileSaver.js的progress事件，你可以使用以下步骤来监听保存进度：

1. 创建一个Blob对象或File对象，该对象将被保存到用户设备上。

const file = new Blob(['Hello, world!'], { type: 'text/plain;charset=utf-8' });

2. 使用saveAs()方法保存文件，并在保存操作的过程中监听progress事件。

saveAs(file, 'example.txt').on("progress", function(event) {
  // 获取保存进度
  const progress = event.loaded / event.total;
  console.log('保存进度：', progress);
});

在上述代码中，我们通过调用on()方法来监听progress事件。该方法接受两个参数，第一个参数是事件类型，第二个参数是事件处理函数。

3. 在事件处理函数中，你可以获取保存进度的相关信息。event.loaded表示已加载的字节数，event.total表示总共要加载的字节数。

saveAs(file, 'example.txt').on("progress", function(event) {
  const progress = event.loaded / event.total;
  console.log('保存进度：', progress);
});

在事件处理函数中，你可以根据需要执行其他操作，如更新进度条、显示保存进度等。

需要注意的是，不是所有的浏览器都支持FileSaver.js的progress事件，因此在某些浏览器中可能无法使用该事件。另外，进度事件的精度和更新频率也可能受到浏览器和网络限制的影响。

如果你需要更精确的保存进度控制，可能需要使用其他具有更多功能的JavaScript库，如axios或fetch，它们提供了更强大的进度事件支持。