Vue中下载文件

场景

一个按钮

通过链接（可以是自定义，也可以是后台传的）

下载一个或多个文件

下载一个文件

下载一个文件时，用a标签点击即可实现

  async fileDownload() {
      await fileDownload().then((res) => {
       // 创建a标签
        const link = document.createElement('a')
       // 设置a标签的href（点击地址）
        link.href =
          res.data && res.data.data ? res.data.data.vApplicationUrl : ''
       // 设置a标签属性
        link.setAttribute('download', '注册申请模板.xlsx')
       // 点击a标签

        document.body.appendChild(link)
        link.click()
       // 移除a标签
        document.body.removeChild(link)
      })
    },

下载多个文件

下载多个文件时，需要将要下载的链接放到一个数组内

    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)
    },
    async fileDownload() {
      await fileDownload().then((res) => {
        console.log(res.data.data.vApplicationUrl)
        // 构建链接数组
        let link1 =
          res.data && res.data.data ? res.data.data.vApplicationUrl : ''

        let link2 = res.data && res.data.data ? res.data.data.vRoleUrl : ''
        let linkArr = []
        linkArr.push(link1, link2)
        // 下载数组内的每一个链接对应的文件
        for (let i = 0; i < linkArr.length; i++) {
          //循环遍历调用downloadFile方法
          const url = linkArr[i]
          this.downloadFile(url)
        }
      })
    },