vue里面调后台接口后用a标签单个下载和批量下载_vue &lt；a href 查询接口后

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

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

            link.click();

**二、批量下载文件，同样是调后台接口传多个id、过去。前端用a、标签下载，由于文件太多，这里是生成一个zip包，下载后，解压缩zip包就可以了。**


**先上network请求：**


![](https://img-blog.csdnimg.cn/20201111140037927.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ2MjQ5,size_16,color_FFFFFF,t_70)


**效果图如下：**


![](https://img-blog.csdnimg.cn/20201111140116100.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ2MjQ5,size_16,color_FFFFFF,t_70)


**主要代码如下：**


**这里是接口传给后台多个id，**


**recIds[]:110001031QQAIF1N01,110001031QP61EZS01,110001031QP5HSL801**

// 批量下载
allDownload(){
  let baseURl = this.$store.getters.getAllServer;
  let url1 = baseURl['12'] +  "/record/RecordInfo/downloadFiles?recIds[]=" + this.selectAllRecIdData.join(",");
  setTimeout(()=>{
    var aDom = document.createElement('a'); //创建标签
    var evt = document.createEvent('HTMLEvents'); //创建事件
    evt.initEvent('click', false, false); //初始化事件，绑定点击事件，不冒泡，不阻止浏览器默认行为
    aDom.download = name;
    aDom.href = encodeURI(url1); //对地址进行编码
    aDom.dispatchEvent(evt); //触发事件
    aDom.click();
  },1000)

}

最后为了方便大家的沟通与交流请加QQ群： [625787746](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)


请进QQ群交流：【IT博客技术分享群①】：<https://jq.qq.com/?_wv=1027&k=DceI0140>



### 总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

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

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

**前端面试题汇总**

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

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

**JavaScript**

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

**性能**

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



**linux**

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




**linux**

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