下载文件时显示进度条？

【问题标题】：Show progress bar when downloading a file?下载文件时显示进度条？
【发布时间】：2019-07-31 16:45:41
【问题描述】：

当用户点击文件链接时，我希望开始下载，并且网页还应该显示一个进度条，显示下载完成了多少。

我在 google colab 上看到了这个东西。看截图： screenshot link 。屏幕截图中的右侧栏显示下载进度。

在 google colab 中，一旦进度条为 100%，浏览器会在 1 秒内下载文件。我想要这样或者像正常下载一样的东西，浏览器显示下载进度条，但网站也显示它。

我该怎么做？我正在使用 Flask、Javascript、HTML 来运行网站。在我的网页中，有多个下载链接，我想为所有这些链接。

【问题讨论】：

标签： javascript html flask

【解决方案1】：

您可以为此使用javascript的update()和scene()函数。

function update() { 
  var element = document.getElementById("Your_div_id of progress bar comes here");    
  var width = 1; 
  var identity = setInterval(scene, 10); 
  function scene() { 
    if (width >= 100) { 
      clearInterval(identity); 
    } else { 
      width++;  
      element.style.width = width + '%';  
    } 
  } 
}

你可以调用update()方法-

<button onclick="update()">Start Download</button>

希望这会有所帮助:)

【讨论】：