vue-elementui table 导出功能

需要先引入两个依赖

npm install --save xlsx file-saver

然后前端页面代码

这是脚手架组件代码

// 引入导出Excel表格依赖 也可以直接引导main,js

import FileSaver from "file-saver";

import XLSX from "xlsx";

export default {

name: "exproteltable",

data() {

return {

tdata: [

{

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 弄"

}

]

};

},

mounted() {},

methods: {

//定义导出Excel表格事件

exportExcel() {

/* 从表生成工作簿对象 */

var wb = XLSX.utils.table_to_book(document.querySelector("#out-eltable"));

/* 获取二进制字符串作为输出 */

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"

);

} catch (e) {

if (typeof console !== "undefined") 

console.log(e, wbout);

}

return wbout;

}

}

};

.table {

width: 100%;

height: 300px;

}