前端vue中文件下载的几种方式

我就是我 2023-05-29 09:27 22阅读 0赞

**第一种方式是前端创建超链接，通过a标签的链接向后端服务发get请求，接收后端的文件流，非常简单：**

另一种情况是创建div标签，动态创建a标签：

<div name="downloadfile" "downloadExcel()">下载</div>
    function downloadExcel() {
        let a = document.createElement('a')
        a.href ="/user/downloadExcel"
        a.click();
    }

**第二种方式通过创建iframe的方式：**

<el-button  size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>
    //method方法：
    handleExport(row) {
          var elemIF = document.createElement('iframe')
          elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +
                        '&category=' + row.category 
          elemIF.style.display = 'none'
          document.body.appendChild(elemIF)
        }

**第三种方式，会对后端发的post请求，使用blob格式：**

<el-button  size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>
    //method方法
    handleExport(row){
    const url="/user/downloadExcel"
    const options = {snapshotTime:formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm')}
    exportExcel(url,options)
    }
    /**
     * 封装导出Excal文件请求
     * @param url
     * @param data
     * @returns {Promise}
     */
    //api.js
    export function exportExcel(url, options = {}) {
      return new Promise((resolve, reject) => {
        console.log(`${url} 请求数据，参数=>`, JSON.stringify(options))
        axios.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
        axios({
          method: 'post',
          url: url, // 请求地址
          data: options, // 参数
          responseType: 'blob' // 表明返回服务器返回的数据类型
        }).then(
          response => {
            resolve(response.data)
            let blob = new Blob([response.data], {
              type: 'application/vnd.ms-excel'
            })
            console.log(blob)
            let fileName = Date.parse(new Date()) + '.xlsx'
            if (window.navigator.msSaveOrOpenBlob) {
              // console.log(2)
              navigator.msSaveBlob(blob, fileName)
            } else {
              // console.log(3)
              var link = document.createElement('a')
              link.href = window.URL.createObjectURL(blob)
              link.download = fileName
              link.click()
              //释放内存
              window.URL.revokeObjectURL(link.href)
            }
          },
          err => {
            reject(err)
          }
        )
      })
    }

如果后端提供的下载接口是get类型，可以直接使用方法一和二，简单又便捷；当然如果想使用方法三也是可以的，不过感觉有点舍近求远了。如果后端提供的下载接口是post类型，就必须要用方法三了。