1、安装依赖
npm install xlsx@^0.16.0 --registry=https://registry.npmmirror.com
npm install file-saver --registry=https://registry.npmmirror.com
2、在main.js文件中全局配置
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
Vue.config.productionTip = false
Vue.prototype.$FileSaver = FileSaver;
Vue.prototype.$XLSX = XLSX;
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app')
3、template代码
<template>
<div>
<el-button type="primary" @click="outExcel">导出excel</el-button>
<el-table :data="tableData" border style="width: 100%" id="table_excel">
<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>
4、script代码
export default {
data() {
return {
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 弄",
},
],
};
},
methods: {
outExcel() {
this.$alert("是否导出excel", "导出", {
confirmButtonText: "确定",
callback: (action) => {
var xlsxParam = { raw: true }; // 导出的内容只做解析,不进行格式转换
let tables = document.getElementById("table_excel");
let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
const table_write = this.$XLSX.write(table_book, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
this.$FileSaver.saveAs(
new Blob([table_write], { type: "application/octet-stream" }),
`excel表格.xlsx` //这里是文件名
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, table_write);
}
return table_write;
},
});
},
},
};
5、vue全部代码
<template>
<div>
<el-button type="primary" @click="outExcel">导出excel</el-button>
<el-table :data="tableData" border style="width: 100%" id="table_excel">
<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>
<script>
export default {
data() {
return {
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 弄",
},
],
};
},
methods: {
outExcel() {
this.$alert("是否导出excel", "导出", {
confirmButtonText: "确定",
callback: (action) => {
var xlsxParam = { raw: true }; // 导出的内容只做解析,不进行格式转换
let tables = document.getElementById("table_excel");
let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
const table_write = this.$XLSX.write(table_book, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
this.$FileSaver.saveAs(
new Blob([table_write], { type: "application/octet-stream" }),
`excel表格.xlsx` //这里是文件名
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, table_write);
}
return table_write;
},
});
},
},
};
</script>
<style>
</style>