vue用iframe实现download功能

最新推荐文章于 2025-04-29 16:45:12 发布

Wonder*

最新推荐文章于 2025-04-29 16:45:12 发布

阅读量3k

点赞数

分类专栏：工作文章标签： vue.js html javascript

本文链接：https://blog.youkuaiyun.com/weixin_44427784/article/details/120436907

版权

工作专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种利用iframe实现文件批量下载的方法。该方法适用于已知文件下载URL的情况，通过创建并附加隐藏的iframe元素来触发下载过程。文章详细解释了单个文件下载和批量下载的实现方式，并提供了一个具体的JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载前一定是要先拿到文件下载地址的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都是从后端拿到的，功能可以实现，但是从网上找的图片或者文件链接，我试了一下点击下载没任何反应，还不知道原因，太菜了...)