vue用iframe实现download功能

下载前一定是要先拿到文件下载地址的url，如果在执行下载方法之前已经拿到url，可以通过传参的方式写到downLoad方法中，如果没拿到过，可以在downLoad方法里，调接口获取url。

1.单个下载

downLoad (url) {
    const iframe = document.createElement("iframe");
    iframe.src = url;
    iframe.style.display = "none"; // 防止影响页面
    iframe.style.height = 0; // 防止影响页面
    document.body.appendChild(iframe); // 必写，iframe挂在到dom树上才会发请求
    // 定时删除节点
    setTimeout(() => {
       document.body.removeChild(iframe);
    }, 2000);
}

2.批量下载

和单个下载类似，批量只要遍历拿到需要下载的url，循环创建iframe节点就可。

downLoad () {
    // 这里的 detail 是一个已知的对象
    // picList  picList 是两个数组，里面是一个个对象，每个对象里有一个我们下载要用的downUrl
    // 通过扩展运算符(...)展开后，data的形式就是 [{...},{..},{...},...]
      const data = [
        ...this.detail.picList,
        ...this.detail.videoList
      ];
      for (let i = 0; i < data.length; i++) {
        const url = data[i].downUrl;
        const iframe= document.createElement('iframe');
        iframe.src = url;
        iframe.style.display = 'none';
        document.body.appendChild(iframe);
        setTimeout(() => {
          document.body.removeChild(iframe);
        }, 2000);
}

数组data存放了所有需要下载的文件对象，通过遍历data，每次拿到对象里的url后，进行与单个下载一样的操作即可。

(备注：这里说的url都是从后端拿到的，功能可以实现，但是从网上找的图片或者文件链接，我试了一下点击下载没任何反应，还不知道原因，太菜了...)

vue用iframe实现download功能

猜你喜欢