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

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

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

前端视频资料：

            link.target = '_self';
            link.download = '';
            link.href = baseURl['12'] +  "/record/RecordInfo/downloadFile?recId=" + this.row_recId;
            document.body.appendChild(link);
            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)


### 最后

**文章到这里就结束了，如果觉得对你有帮助可以点个赞哦**

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

![](https://img-blog.csdnimg.cn/img_convert/d92583ad374e940ea542f31c9a56da2c.webp?x-oss-process=image/format,png)



6d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-uOrzwh6D-1715845098213)]