第一步、
首先安装三个依赖
npm install -S file-saver xlsx
npm install -D script-loader
或者:
yarn add file-saver
yarn add xlsx
yarn add script-loader --dev
第二步、
引入两个js文件
在src目录下新建excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件
链接1: https://pan.baidu.com/s/1iqyQAwYZqxxFtLIeOnzAag 提取码: upxq
链接2: https://pan.baidu.com/s/1IHOgPrKC_NIKaBvLngwvMw 提取码: 76yv
下载后放到src下面的文件夹下:
第三步、
在main.js引入这两个文件(路径取决你们的路径)
第四步、
正确设置路径
打开Export2Excel.js文件,设置里面的路径,正确引入Blob.js
现在回到你要用导出功能的组件里,在data里放入tableData变量,这个是存放你表格里的数据,类型为数组,里面存放对象,表格的每一行为一个对象,存入tableData。
举个列子:
如果你的每一行是这样子
那么data里的tableData就是这样子(切记,你的表格有多少行内容,tableData里就存多少个对象,对象属性不用变,改变值即可)
第五步、
接下来在methods里写入两个方法,如下:
哪个按钮是导出功能,就调用export2Excel()方法:
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel');
const tHeader = ['序号', '帐号', '院校'];
// 上面设置Excel的表格第一行的标题
const filterVal = ['index', 'phone_Num', 'school_Name'];
// 上面的index、phone_Num、school_Name是tableData里对象的属性
const list = this.tableData; //把data里的tableData存到list
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
注意上面的方法也有个路径问题,要自己修改:
第六步、完整代码如下:
<template>
<div>
<el-row :gutter="24" style="margin-bottom:20px;">
<el-col :span="24" class="text-right">
<!--给按钮绑定事件-->
<el-button type="primary" @click="exportExcel">点击导出</el-button>
</el-col>
</el-row>
<!-- 表格导出1 -->
<!--给表格添加一个id,导出文件事件需要使用-->
<el-row :gutter="24" style="margin-bottom:20px;">
<el-table :data="historyData" border style="width: 100%" id="out-table">
<el-table-column type="index" label="序号" width="60"></el-table-column>
<el-table-column prop="date" label="日期" width="150"></el-table-column>
<el-table-column prop="name" label="姓名" width="150"></el-table-column>
<el-table-column prop="province" label="省份" width="150"></el-table-column>
<el-table-column prop="city" label="市区" width="150"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="zip" label="邮编" width="150"></el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button type="primary" @click="handleClick(scope.row)" size="small">查看</el-button>
<el-button type="primary" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
</div>
</template>
<script>
// 引入导出Excel表格依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
data() {
return {
// 导出一、
historyData: [
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}],
excelData:[],
};
},
mounted() {
},
methods: {
//定义导出Excel表格事件
exportExcel() {
/* 从表生成工作簿对象 */
// var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
// /* 获取二进制字符串作为输出 */
// var wbout = XLSX.write(wb, {
// bookType: "xlsx",
// bookSST: true,
// type: "array"
// });
// try {
// FileSaver.saveAs(
// //Blob 对象表示一个不可变、原始数据的类文件对象。
// //Blob 表示的不一定是JavaScript原生格式的数据。
// //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
// //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
// new Blob([wbout], { type: "application/octet-stream" }),
// //设置导出文件名称
// "导出表格.xlsx"
// );
// console.log("wbout:", wbout);
// } catch (e) {
// if (typeof console !== "undefined")
// console.log(e, wbout);
// }
// return wbout;
this.$confirm('确定下载列表文件?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.excelData = this.historyData //你要导出的数据list。
this.export2Excel();
}).catch(() => {});
},
export2Excel() {
var that = this;
require.ensure([], () => {
const { export_json_to_excel } = require('../../../excel/Export2Excel'); //这里必须使用绝对路径,使用@/+存放export2Excel的路径
const tHeader = ['date','name','province','city','address','zip']; // 导出的表头名信息
const filterVal = ['date','name','province','city','address','zip']; // 导出的表头字段名,需要导出表格字段名
const list = that.excelData;
const data = that.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '下载数据excel');// 导出的表格名称,根据需要自己命名
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
//查看
handleClick(row) {
console.log(row);
},
}
};
</script>
<style>
</style>
第七步、导出的结果如下:
第八步、注意事项:
报错提示如下:
查了很多资料最后终于找到了:
因为 Export2Excel.js 里面 Blob.js的路径引入的不正确;请看下图:
正确的路径如下:
没有报错了;
最后为了方便大家的沟通与交流请加QQ群: 625787746
请进QQ群交流:【IT博客技术分享群①】:https://jq.qq.com/?_wv=1027&k=DceI0140