elementui中有导出组件吗_Element-ui组件库Table表格导出Excel表格

安装

npm install --save xlsx file-saver

两个插件的详细地址在下面

https://github.com/SheetJS/js-xlsx

https://github.com/eligrey/FileSaver.js

代码部分(有注释解释说明)

:data="tableData"

border

style="width: 100%"

id="out-table"

>

prop="date"

label="日期"

width="180"

>

prop="name"

label="姓名"

width="180"

>

prop="address"

label="地址"

>

点击导出

// 引入导出Excel表格依赖

import FileSaver from "file-saver";

import XLSX from "xlsx";

export default {

name: "javascriptthree",

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

}

]

};

},

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" }),

//设置导出文件名称

"sheetjs.xlsx"

);

} catch (e) {

if (typeof console !== "undefined") console.log(e, wbout);

}

return wbout;

}

}

};

.table {

width: 100%;

height: 300px;

}