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

FileSaver.saveAs() 是一个前端库 FileSaver.js 提供的方法，用于保存文件到用户的设备上。但是，该库并不提供保存进度的功能，也没有内置的进度条事件监听。如果你需要监听保存进度，你可能需要使用其他的方法，例如使用 XMLHttpRequest 或者 fetch API 来下载文件，并监听 progress 事件以获取进度信息。

以下是使用 fetch API 和 progress 事件的一个简单示例：

function downloadFile(url, filename) {
  fetch(url, {
    method: 'GET',
    headers: {},
    mode: 'cors', // 跨域请求
  })
  .then(response => response.blob())
  .then(blob => {
    const blobUrl = URL.createObjectURL(blob);
    // 使用 FileSaver.js 保存文件
    saveAs(blobUrl, filename);
  })
  .catch(error => console.error('下载文件出错:', error));
}
 
function updateProgress(event) {
  if (event.lengthComputable) {
    // event.loaded: 已经下载的字节
    // event.total: 总字节数
    var percentComplete = (event.loaded / event.total).toPrecision(3) * 100;
    console.log(percentComplete.toFixed(2) + '%');
    // 更新进度条的逻辑
  }
}
 
// 使用示例
downloadFile('https://example.com/file.pdf', 'file.pdf');

在这个示例中，我们使用 fetch() 函数来获取文件，并监听 progress 事件来跟踪下载进度。然后，我们使用 FileSaver.saveAs() 来保存文件。你需要实现 updateProgress 函数来更新进度条的显示。注意，这个例子没有实现实际的进度条更新，而是在控制台打印下载的百分比。

如果你需要一个真正的进度条，你需要在 updateProgress 函数中更新一个 DOM 元素，比如一个 <progress> 或 <div> 标签，来显示当前的下载进度。