vue-element-admin实现下载excel

vue里实现下载的方法如下

downloadExcel(id){
    const data = {}
    data.id = id
    data.token = this.$store.state.token
    this.axios({
        method: "POST",
        url: '###',
        data: qs.stringify(data),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        responseType: 'arraybuffer'
    }).then(function(res) {
        let blob = new Blob([res], {type: "application/csv"}); 
        let objectUrl = URL.createObjectURL(blob); 
        window.location.href = objectUrl;  
    });

}

这实现方法可以实现下载.

但是需要注意,这里跟php不一样的是:如果遇到下载的数据是乱码的情况下,请注意php代码是否对数据进行iconv转化。

此种方法实现在数据量相对小,可行.

面对数据量大时,可采用在服务器先生成excel文件,给前端返回excel文件的url地址,然后就再进行下载.

downloadExcel(id){
    const data = {}
    data.id = id
    data.token = this.$store.state.token
    this.axios({
        method: "get",
        url: '###',
        data: qs.stringify(data),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).then(function(res) {
        let url = res.url
        window.location.href = url;  
    });

}

发表评论