a标签实现单文件和多文件下载

最新推荐文章于 2024-06-25 17:58:02 发布

大大。

最新推荐文章于 2024-06-25 17:58:02 发布

阅读量712

点赞数

文章标签： java c++ windows

本文链接：https://blog.csdn.net/weixin_43923808/article/details/130262819

版权

文章介绍了如何使用HTML的a标签结合download属性实现单文件下载，以及通过创建隐藏的iframe来实现多个文件的批量下载。在批量下载的JavaScript函数中，文件URLs存储在数组中，每个URL加载到一个隐藏的iframe中以触发下载，完成后定时删除iframe。

摘要由CSDN通过智能技术生成

批量效果如图：

单文件下载

单个的文件下载只需要使用a标签将文件目标放在href中，然后添加download属性。

<a :href="scope.row.cadUrl" class="href_color" target="_blank" download="自定义下载文件的名称">下载CAD图纸</a>

多文件下载（批量下载）

下载多文件时，将需要下载的文件的地址放到一个数组内，代码如下：

  <a @click="loadFilesWin(文件地址数组)" class="href_color" target="_blank">下载CAD图纸</a>


  loadFilesWin(urls) {
      var urlsArray = urls.split(','); //被逗号分隔的多个文件的地址
      for (let i = 0; i < urlsArray.length; i++) {
        const iframe = document.createElement('iframe');
        iframe.style.display = 'none'; // 防止影响页面
        iframe.style.height = 0; // 防止影响页面
        iframe.src = urlsArray[i];
        document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
        // 5分钟之后删除
        setTimeout(() => {
          iframe.remove();
        }, 5 * 60 * 1000);
      }
    },

或者//文件地址数组可以不传，直接换data里取值，其中excelList为数组
loadFilesWin() {
    let _this = this;
    for(let i=0;i<_this.excelList.length;i++){
        const iframe = document.createElement("iframe");
        iframe.style.display = "none"; // 防止影响页面
        iframe.style.height = 0; // 防止影响页面
        iframe.src = _this.excelList[i]; 
        document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
        // 5分钟之后删除
        setTimeout(()=>{
          iframe.remove();
        }, 5 * 60 * 1000);
    }
}