zoukankan      html  css  js  c++  java
  • 基于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 不会相互影响,可以连续下载哦!

  • 相关阅读:
    瀑布流
    进度条
    图片延迟加载、scroll
    scroll 滚动广告
    json
    样式更改
    js 不同浏览器的宽度获取
    孤立点挖掘算法
    数据结构算法代码
    深入浅出JMS(一)--JMS基本概念
  • 原文地址:https://www.cnblogs.com/wlming/p/13962039.html
Copyright © 2011-2022 走看看