VUE导出数据为excel，xlsx
Posted qaakd
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE导出数据为excel，xlsx相关的知识，希望对你有一定的参考价值。
npm需要安装插件：
npm install --save file-saver xlsx
代码如下：
<template>
<a-table :columns="columns" :data-source="data" id="out-table">
<a slot="name" slot-scope="text">{{ text }}</a>
<span slot="customTitle"><a-icon type="smile-o" /> Name</span>
<span slot="tags" slot-scope="tags">
<a-tag
v-for="tag in tags"
:key="tag"
:color="
tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'
"
>
{{ tag.toUpperCase() }}
</a-tag>
</span>
<span slot="action" slot-scope="text, record">
<a>Invite 一 {{ record.name }}</a>
<a-divider type="vertical" />
<a>Delete</a>
<a-divider type="vertical" />
<a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
</span>
</a-table>
</template>
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
const columns = [
{
dataIndex: "name",
key: "name",
slots: { title: "customTitle" },
scopedSlots: { customRender: "name" },
},
{
title: "Age",
dataIndex: "age",
key: "age",
},
{
title: "Address",
dataIndex: "address",
key: "address",
},
{
title: "Tags",
key: "tags",
dataIndex: "tags",
scopedSlots: { customRender: "tags" },
},
{
title: "Action",
key: "action",
scopedSlots: { customRender: "action" },
},
];
const data = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
tags: ["nice", "developer"],
},
{
key: "2",
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
tags: ["loser"],
},
{
key: "3",
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
tags: ["cool", "teacher"],
},
];
export default {
name: "login",
data() {
return {
data,
columns,
};
},
methods: {
onChange() {},
//da导出表格
exportExcel() {
/* generate workbook object from table */
var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
/* get binary string as output */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
"订单详情.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
},
// 导入表格
},
mounted() {
this.exportExcel();
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
以上是关于VUE导出数据为excel，xlsx的主要内容，如果未能解决你的问题，请参考以下文章
Vue中 element的table表格导入 与 导出为excel表格的实现