本篇内容仅展示前端代码,后端代码链接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,
});
},