批量下载附件

最新推荐文章于 2023-12-13 13:06:53 发布

Fayneヾ

最新推荐文章于 2023-12-13 13:06:53 发布

阅读量338

点赞数

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

本文链接：https://blog.csdn.net/weixin_42988734/article/details/115077150

版权

js 同时被 2 个专栏收录

7 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

这篇博客详细介绍了如何在前端实现批量下载附件的功能。通过使用`fetch` API获取文件URL，将响应转换为blob，然后创建隐藏的下载链接触发下载。代码中展示了`downLoadFileList`和`downloadFile`两个关键函数，实现了对文件列表的遍历并逐个下载。此方法适用于前端处理大量文件下载的场景。

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

批量下载附件

<el-button type="primary" @click="downLoadFileList(scope.row)">下载</el-button>

// 下载附件
    downLoadFileList(record) {
      const jsonUrlList = record.fileUrlList
      // 循环遍历调用downloadFile方法
      for (let i = 0; i < jsonUrlList.length; i++) {
        const url = jsonUrlList[i]
        const name = url.substring(url.lastIndexOf('/') + 1, url.length)
        this.downloadFile(url, name)
      }
    },
    //  批量下载
    downloadFile(url, name) {
      const download = async() => {
        const response = await fetch(url) // 内容转变成blob地址
        const blob = await response.blob() // 创建隐藏的可下载链接
        const objectUrl = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = objectUrl
        a.download = name
        a.click()
        a.remove()
      }
      download()
    },