a標(biāo)簽中的 download 屬性是 h5 的標(biāo)準(zhǔn)
MDN 對(duì)于 a 標(biāo)簽中 download 的說(shuō)明：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

單個(gè)文件下載

1. 對(duì)于單個(gè)文件下載，使用 a 標(biāo)簽即可。類似下面代碼：

 // 其中 url 為你文件的路徑，name為給文件指定的新的名字
 <a href="url" download="name">
 // 如果不需要指定新的名字，可以用下面的方式
 <a href="url" download>

注意：

• 需要下載的文件是 同源文件，否則瀏覽器控制臺(tái)會(huì)報(bào) 警告，類似

  
  
  1.png

2. 非同源文件，不要控制臺(tái)報(bào)警告，可用下面的方式，即指定 a 標(biāo)簽的 target 屬性

    // 瀏覽器會(huì)先打開(kāi)一個(gè)空白標(biāo)簽頁(yè)面，等下載完成會(huì)自動(dòng)關(guān)閉空白標(biāo)簽頁(yè)
    // 測(cè)試了多個(gè)瀏覽器，對(duì)于 IE 瀏覽器，不會(huì)關(guān)閉打開(kāi)的 空白標(biāo)簽頁(yè)
    <a href="url" download="name" target="_blank">
   

批量下載多個(gè)文件

創(chuàng)建一個(gè)隱藏的 <a> 標(biāo)簽，設(shè)置 href 等屬性，用 JavaScript 來(lái)觸發(fā)這個(gè)它的 click 事件，代碼如下；

const files = ['url1', 'url2', 'url3'];
files.forEach(url => {
    const aLabel = document.createElement('a');
    const aEvent = document.createEvent('MouseEvents'); // 創(chuàng)建鼠標(biāo)事件對(duì)象
   
    aEvent.initEvent('click', false, false);
    aLabel.href = url;
    aLabel.download = ''; // 設(shè)置下載文件名，當(dāng)不需要重新命名時(shí)，可以賦值為空字符串
    // 同源文件可以不用寫這句，如果非同源文件，請(qǐng)一定加上這句話
    // 否則每次只會(huì)下載其中一個(gè)文件就中斷其余文件的下載了，控制臺(tái)報(bào)和單個(gè)文件中截圖的那個(gè)警告
    // aLabel.target = '_blank';
    aLabel.dispatchEvent(aEvent);
});

注意： 請(qǐng)注意 aLabel.target = '_blank'; 這句上面的注釋