vue+springboot实现导出excel文件

weixin_53952829

已于 2023-06-19 14:07:43 修改

阅读量1k

点赞数 1

文章标签： vue.js 前端 javascript html css ajax

于 2023-06-19 14:04:41 首次发布

本文链接：https://blog.csdn.net/weixin_53952829/article/details/131286354

版权

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

运行结果如图

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

HTML代码如下

<template>
    <div>
        <div class="top" style="margin: 10px 0">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="checBugDialog"
                        >新建缺陷</el-button
                    >
                </el-col>
                <el-col :span="1.5">
                    <el-button
                        type="success"
                        icon="el-icon-edit"
                        size="mini"
                        @click="BugStatisticsDialog"
                        >缺陷统计</el-button
                    >
                </el-col>
                <el-col :span="1.5">
                    <el-button
                        type="warning"
                        icon="el-icon-download"
                        size="mini"
                        @click="handleImport"
                        >导入</el-button
                    >
                </el-col>
                <el-col :span="1.5">
                    <el-button
                        type="danger"
                        @click="exportToExcel"
                        icon="el-icon-upload2"
                        size="mini"
                        >导出</el-button
                    >
                </el-col>
            </el-row>
        </div>
        <div class="main">
            <el-table :data="mdata" border stripe :header-cell-class-name="headerBg">
                <el-table-column
                    label="ID"
                    type="index"
                    width="40"
                    align="center"
                    prop="userId"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="缺陷名称"
                    align="center"
                    prop="bugName"
                    :show-overflow-tooltip="true"
                    width="100"
                >
                    <template slot-scope="scope">
                        <el-button type="text" @click="detail(scope.row)">
                            {{ scope.row.bugName }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    label="缺陷类型"
                    align="center"
                    prop="bugKind"
                    :show-overflow-tooltip="true"
                    width="100"
                />
                <el-table-column
                    label="确认"
                    align="center"
                    prop="confirm"
                    :show-overflow-tooltip="true"
                    width="70"
                />
                <el-table-column
                    label="优先级"
                    align="center"
                    prop="priority"
                    :show-overflow-tooltip="true"
                    width="70"
                />
                <el-table-column
                    label="缺陷状态"
                    align="center"
                    prop="status"
                    :show-overflow-tooltip="true"
                    width="80"
                />
                <el-table-column
                    label="项目名称"
                    align="center"
                    prop="productName"
                    :show-overflow-tooltip="true"
                    width="80"
                />
                <el-table-column
                    label="模块名称"
                    align="center"
                    prop="functionName"
                    :show-overflow-tooltip="true"
                    width="80"
                />
                <el-table-column
                    label="缺陷描述"
                    align="center"
                    prop="bugRemark"
                    :show-overflow-tooltip="true"
                    width="130"
                />
                <el-table-column
                    label="缺陷提交人"
                    align="center"
                    prop="creatorName"
                    :show-overflow-tooltip="true"
                    width="80"
                />
                <el-table-column label="提交时间" align="center" prop="updateTime" width="100" />
                <el-table-column
                    label="缺陷解决人"
                    align="center"
                    prop="designeeName"
                    :show-overflow-tooltip="true"
                    width="80"
                />
                <el-table-column label="解决时间" align="center" prop="solveTime" width="100" />
                <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                    width="150"
                >
                    <!-- eslint-disable-next-line -->
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="confirmBug(scope.row)"
                            >确认</el-button
                        >
                        <el-button type="text" size="mini" @click="solveBug(scope.row)"
                            >解决</el-button
                        >
                        <el-button type="text" size="mini" @click="refuseBug(scope.row)"
                            >打回</el-button
                        >
                        <el-button type="text" size="mini" @click="closeBug(scope.row)"
                            >关闭</el-button
                        >
                        <el-button type="text" size="mini" @click="deleteBug(scope.row)"
                            >删除</el-button
                        >
                        <el-button type="text" size="mini" @click="checkBugDialog(scope.row)"
                            >修改</el-button
                        >
                        <!--scope.row是当前行的数据-->
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <div class="block">
            <span class="demonstration">页数</span>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.pageNum"
                :page-sizes="[2, 5, 10, 20]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

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,
        });
    },