Vue3.0 大文件下载优化：使用 axios 实现进度条显示

前端可以使用 axios 库进行文件下载，并使用 axios 的进度条来显示下载进度。

以下是示例代码：

// 下载文件的方法
function downloadFile(url) {  
  return axios({
    url: url,
    method: 'GET',
    responseType: 'blob',
    onDownloadProgress: progressEvent => {
      // 进度条显示
      const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
      console.log('下载进度：' + percentCompleted + '%')
    }
  }).then(response => {
    // 文件下载成功后的处理
    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', 'file.pdf')
    document.body.appendChild(link)
    link.click()
  })
}

// 调用下载方法
downloadFile('/path/to/file.pdf')

在这个示例代码中，我们使用了 axios 库来发起 GET 请求，并且设置了 responseType 为 blob，以便能够下载文件。我们还使用了 axios 的 onDownloadProgress 方法来显示下载进度。

在文件下载成功后，我们创建了一个 URL 对象，将文件内容转换为 Blob，并将其作为链接的 href 属性值。最后，我们创建一个 a 标签，将链接添加到 DOM 中，并模拟用户点击以下载文件。

请注意，这个示例代码并没有对大文件进行特殊处理，所以如果下载的文件非常大，可能会导致内存溢出或其他问题。因此，如果需要处理大文件，请使用流式下载或其他相关技术。