vue实现导出excel
参考小圣贤君
最终效果
点击导表
跳出导出文件
实现过程
1.先安装依赖
npm install --save xlsx file-saver
2.在需要的组件内引入
-
import FileSaver
from
"file-saver";
-
import XLSX
from
"xlsx";
3.使用---必须保证表格格式对应，不然报错
我用了布局来写的表格，然后就会报这个错
好吧，来看看正确的写法
-
<template>
-
<div>
-
-
<div class="toexcel">
-
<el-button @click="exportExcel" type="primary" class="button" style="width:70px;position:absolute;top:0;right:30px">导出
el-button>
-
div>
-
<el-table
-
class=
"table"
-
:data=
"tableData"
-
border
-
style=
"width: 100%">
-
<el-table-column
-
prop=
"date"
-
label=
"日期"
-
width=
"180">
-
el-table-column>
-
<el-table-column
-
prop=
"name"
-
label=
"姓名"
-
width=
"180">
-
el-table-column>
-
<el-table-column
-
prop=
"address"
-
label=
"地址">
-
el-table-column>
-
el-table>
-
div>
-
template>
js