vue+springboot实现导出excel文件

本篇内容仅展示前端代码，后端代码链接SpringBoot整合Easyexcel实现将数据导出为Excel表格的功能_C.Y.H～的博客-CSDN博客

运行结果如图

点击导出按钮 实现对页面数据的导出

HTML代码如下 

JS代码

        //导出全部按钮点击事件
        exportToExcel() {
            common.outputBug().then((res) => {
                this.export2Excel(res);
            });
        },
        //文件导出
        export2Excel(data) {
            if (!data) {
                return;
            }
            const link = document.createElement('a');
            let blob = new Blob([data], { type: 'application/vnd.ms-excel' });
            link.style.display = 'none';
            link.href = URL.createObjectURL(blob);

            link.setAttribute('download', '记录信息' + '.xls');
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        },

接口JS代码

    /***导出bug*/
    outputBug(param, callback) {
        return request({
            url: '/bug/outputBugByExcel',
            responseType: 'blob',
            data: param,
            procgress: true,
            back: callback,
        });
    },