这篇文章主要介绍了前端在后台有下载excel接口的情况下实现get/post下载。

后台提供下载接口，可传参数

使用get方法

  • 1
    window.location.href = '/api/xxx/xxx?params'
  • 1
    window.open('/api/xxx/xxx?params')
  • 1
    <a href="/api/xxx/xxx?params" download="excel.xls">export</a>
get方法参数拼接
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 拆分数据
    splitData: function (data) {
        let url = ''
        for (let k in data) {
            if (data.hasOwnProperty(k)) {
                let value = data[k] || ''
                url = url + '&' + k + '=' + encodeURIComponent(value)
            }
        }
        return url ? url.substring(1) : ''
    },

    // 拼接参数
    contractUrl: function (url, data) {
        return url + (url.indexOf('?') < 0 ? '?' : '&') + this.splitData(data)
    },

使用post方法

直接调用接口是返回表格流文件格式的，可以使用 Blob 对象指定要读取的文件或数据，然后创建a标签下载。

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    /**
     *  导出excel文件
     * @param url 下载地址
     * @param data 下载参数
     * @param name 下载文件名
     */
    export const $export = (url, data, name) => {
        let opt = {
            url: url,
            method: 'post',
            responseType: 'blob',
            data: data
        }
        axios.request(opt).then(res => {
        	// Blob 对象表示一个不可变、原始数据的类文件对象（File 接口都是基于Blob）
            const BLOB = res.data
            // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
            const fileReader = new FileReader()
            // 开始读取指定的Blob中的内容。读取完成result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
            fileReader.readAsDataURL(BLOB)
            // 处理load事件，该事件在读取操作完成时触发
            fileReader.onload = (event) => {
                let a = document.createElement('a')
                a.download = `${name}.xls`
                a.href = event.target.result
                document.body.appendChild(a)
                a.click()
                document.body.removeChild(a)
            }
        })
    }

参考

  • 1
    https://www.cnblogs.com/zz-zrr/p/11970935.html