一、單個下載

先上效果圖：

先上network請求：

?主要js代碼如下：

let baseURl = this.$store.getters.getAllServer;let link = document.createElement('a');link.style.display = 'none';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請求：

?效果圖如下：

主要代碼如下：?

這里是接口傳給后臺多個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

請進QQ群交流：【IT博客技術分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140

總結

以上是生活随笔為你收集整理的vue里面调后台接口后用a标签单个下载和批量下载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。