vue导入导出Excel文件

导出

方式一 (不推荐)

html

<a href="javascript:;" @click="handleExport" id="down_a" :target="blank">导出</a>

js

data() {
    return {
        blank:''
    }
},
methods: {
    handleExport () {
        const params = {
            // 导出数据列表时的参数
        }
        const downData = Object.assign({}, params)
        let downStr = '';
        let down_a = document.getElementById('down_a');
        for(name in downData){
            if (downStr.length == 0) {
                downStr = name+'='+downData[name];
            } else {
                downStr = downStr+'&'+name+'='+downData[name]
            }
        }
        this.blank = "_blank";
        // 接口
        down_a.setAttribute('href', '/comment/export?' +downStr);
    }
}

方式二

html

<Spin fix v-show="isSpinShow">
    <Icon type="load-c" size="30" class="demo-spin-icon-load"></Icon>
    <div>Loading...</div>
</Spin>
<div @click="handleExport">下载</div>

js

data () {
    return {
        isSpinShow: false,
    }
}, 
methods: {
    handleExport () {
        this.isSpinShow = true
        const params = {
            // 导出数据列表时的参数
        }
        axios.get('/export', { params }).then((res) => {
            if (res.status === 200) {
                location.href = res.request.responseURL
                setTimeout(() => {
                    this.isSpinShow = false
                }, 1000)
            }            
        }).catch(() => {
            this.isSpinShow = false
        })       
    }
}