基於js或vue項目實現一次批量文件下載功能

頁面效果

下面這個是我的項目截圖效果

代碼

<button @click="bulkDownload()">批量下載</button>

js截圖代碼

js代碼，想用的直接復制下面代碼就可以

export const downloadFile = (url) => {
const iframe = document.createElement("iframe");
iframe.style.display = "none"; // 防止影響頁面
iframe.style.height = 0; // 防止影響頁面
iframe.src = url;
document.body.appendChild(iframe); // 這一行必須，iframe掛在到dom樹上才會發請求
// 5分鍾之后刪除（onload方法對於下載鏈接不起作用，就先摳腳一下吧）
setTimeout(()=>{
iframe.remove();
}, 5 * 60 * 1000);
}


export default {

   data() {
      return {
orderAttachment: [
{attachPath: 下載地址1},
{attachPath: 下載地址2}
]
      }

    }

   methods:{
bulkDownload(){
var that = this;
for(var i =0;i<that.orderAttachment.length;i++){ //循環遍歷調用downloadFile方法
const url = that.orderAttachment[i].attachPath;
downloadFile(url);
}
},
  }

}

 

iframe 不會相互影響，可以連續下載哦!