How to export tables to Excel in Vue
1. Install vue-json-excel
npm install vue-json-excel -S
2. Introduced in main.js
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
3. Use in code
vue part
<template>
<div>
<div class="exportExcel">
<download-excel
class="export-excel-wrapper"
:data="tableData"
:fields="json_fields"
:header="title"
name="demo.xls"
>
<el-button class="exprtBtn" type="primary" >导出elcel</el-button>
</download-excel></div>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column label="日期" width="180" align="center">
<template slot-scope="scope">
<i class="el-icon-time" />
<span style="margin-left: 10px">{
{
scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column label="姓名" width="180" align="center">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>姓名: {
{
scope.row.name }}</p>
<p>住址: {
{
scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{
{
scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="住址" width="280" align="center">
<template slot-scope="scope">
<span style="margin-left: 10px">{
{
scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)"
>编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
js part
<script>
export default {
name: 'Documentation',
data() {
return {
title: '测试导出Excel',
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
json_fields: {
'日期': 'date',
'姓名': 'name',
'地址': 'address'
},
}
},
methods: {
}
}
</script>
css part
<style lang="scss" scoped>
.documentation-container {
margin: 50px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.document-btn {
flex-shrink: 0;
display: block;
cursor: pointer;
background: black;
color: white;
height: 60px;
padding: 0 16px;
margin: 16px;
line-height: 60px;
font-size: 20px;
text-align: center;
}
}
.exportExcel{
width: 100%;
margin: 20px 0 ;
text-align: right;
}
.exprtBtn{
margin-right: 75px;
}
</style>
4. Effect
5. Export common parameters of Excel
