【前端文件下载】直接下载和在浏览器显示下载进度的下载方法_java 前端a标签下载,要文件传输完了才会显示下载信息(1)

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

文件下载方法

之前做下载文件遇到了点问题, 就趁此机会总结一下前端下载文件的方法:

1. 如果是浏览器支持的类型, 那么打开的话是一个preview操作, 那么针对浏览器不支持预览的类型, 如果打开的话就会进行下载操作

a. 地址栏直接输入URL
b. window.location.href = URL
c. window.open(URL)
2. 使用a标签来下载, 利用a标签的download属性, 并且可以自定义下载文件的名称
也可以直接通过js来创建一个a标签, 然后放入body里, 触发其点击事件来下载, 下载过后remove即可

<a href="/xx/xxx.jpg" download="fileName">

3. 通过XMLHttpRequest下载
   缺点: 此方法是下载完毕之后才在浏览器左下角弹出对应的文件信息, 没有下载的进度, 如果文件比较大的话, 就会感觉点击了只是在loading但是并不能确定文件是否在下载, 也无法知道文件的下载进度, 体验感不好

// 接收url fileName, 以及文件下载成功之后的回调
downLoadFile(url, fileName, callback) {
  const url2 = url; // url.replace(/\\/g, "/");
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url2, true);
  xhr.responseType = "blob";
  //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
  // 为了避免大文件影响用户体验，建议加loading
  xhr.onload = () => {
    if (xhr.status === 200) {
      // 获取文件blob数据并保存
      // const suffix = this.getFileSuffix.call(this, url, fileName);
      // this.saveAs.call(this, xhr.response, fileName)
      this.saveAs.call(this, xhr.response, fileName)
    }
	// 下载成功之后执行回调
    callback && callback();
  };
  xhr.send();
},

4. 通过OSS实现有进度条的下载方法
   优点: 点击下载之后直接在浏览器左下角弹出对应的文件信息以及下载的进度, 体验感比较好

// 下载操作
downloadAction(row, type = '') {
  // 获取上传参数
  getDownloadParam().then(data => {
    // 拿到参数之后去创建 OSS 客户端对象
    this.createOssClient(data).then(client => {


###  总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/718310d106ab948d6f467d78e08b1aed.png)