js下载文件并显示进度测试该demo的时候，你的待下载文件要支持跨域，或者你可以把代码拷贝到你待下载文件同域下。

测试该demo的时候，你的待下载文件要支持跨域，或者你可以把代码拷贝到你待下载文件同域下。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>download</title>
</head>

<body>
  <button onclick="download()">下载</button>
  <hr>
  下载进度 <span id="loaded"></span> / <span id="total"></span>
  <hr>
  <span id="success"></span>
  <br>
  <script>
    var url = '你要下载的文件路径'
    var fileName = '浏览器保存时的文件名'

    function download() {
      var xhr = new XMLHttpRequest()
      
      xhr.onprogress = event => { // 下载进度事件
        loaded.innerText = event.loaded
        total.innerText = event.total
      };

      xhr.onload = event => {
        if (xhr.readyState === 4 && xhr.status === 200) { // 下载完成之后
          var blob = new Blob([xhr.response])
          var link = document.createElement('a') // 创建a标签
          link.href = URL.createObjectURL(blob)
          link.download = fileName
          link.click() // js点击完成最终本地保存
          success.innerText = fileName + ' 下载完成'
        }
      }

      xhr.open('GET', url)
      xhr.send()
    }

  </script>
</body>

</html>