目录
方式二：file-saver、xlsx、script-loader
2、下载并引入Blob.js和Export2Excel.js
方式一 ：vue-json-excel
这种方式会导出xls后缀的格式
1、引入vue-json-excel
cnpm i -S vue-json-excel2、 main.js中全局注册
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)3、使用
<!--home-->
<template>
<div class="home">
<download-excel
class="export-excel-wrapper"
:data="json_data"
:fields="json_fields"
type="xls"
worksheet="My Worksheet"
name="用户信息"
>
<el-button>导出EXCEL</el-button>
</download-excel>
</div>
</template>
<script>
export default {
data() {
return {
json_fields: {
年龄: "age", //常规字段
姓名: "info.name", //支持嵌套属性
密码: {
field: "info.phone",
//自定义回调函数
callback: value => {
return `+86 ${value}`;
}
}
},
json_data: [
{
age: 22,
info: {
name: "张三",
phone: 12222222222
},
sex: "男"
},
{
age: 23,
info: {
name: "李四",
phone: 13333333333
},
sex: "女"
}
]
// json_meta: [
// [
// {
// " key ": " charset ",
// " value ": " utf- 8 "
// }
// ]
// ]
};
}
};
</script>
<style lang="scss" scoped>
.home {
height: 100%;
background-color: rgb(128, 126, 126);
}
</style>在这里说明一下组件的各个属性
- json_data：需要导出的数据
- json_fields：自主选择要导出的字段，若不指定，默认导出全部数据中心全部字段
| 属性名 | 类型 | 描述 |
|---|---|---|
| data | Array | 需要导出的数据，支持中文 |
| fields | Object | 定义需要导出数据的字段 |
| name | String | 导出excel的文件名 |
| type | String | 导出excel的文件类型（xls,csv）,默认是xls |
4、效果图
方式二：file-saver、xlsx、script-loader
1、引入依赖
cnpm i -S file-saver xlsx
cnpm i -D script-loader2、下载并引入Blob.js和Export2Excel.js
在src目录下创建excel文件,里面放入Blob.js 和Export2Excel.js两个文件
下载地址：https://pan.baidu.com/s/14cYTqYx7M0oyyYawsB0jjQ 提取码：ksnq
3、使用
<template>
<div>
<el-button type="primary" @click="export2Excel()">导出Excel</el-button>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
tableData: [
{ index: 0, username: "张三", password: 333, age: 22 },
{ index: 1, username: "李四", password: 444, age: 23 }
]
};
},
props: {},
created() {},
mounted() {},
computed: {},
methods: {
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require("@/excel/Export2Excel");
const fieldName = ["索引", "用户名", "密码"];
const filterVal = ["index", "username", "password"];
const data = this.tableData.map(v => filterVal.map(j => v[j]));
export_json_to_excel(fieldName, data, "用户列表");
});
}
},
watch: {}
};
</script>
<style lang="scss" scoped>
</style>| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| header | 导出数据的表头 | Array | / | [] |
| data | 导出的具体数据 | Array | / | [] |
| filename | 导出文件名 | String | / | excel-list |
| autoWidth | 单元格是否要自适应宽度 | Boolean | true / false | true |
| bookType | 导出文件类型 | String | xlsx, csv, txt, more | xlsx |
4、效果图
导出指定的记录
1、引入依赖
cnpm i -S file-saver xlsx
cnpm i -D script-loader2、使用
<template>
<div>
<el-button type="primary" @click="exportExcel">导出文件</el-button>
<el-table :data="tableData" style="width: 100%" id="out-table">
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="age" label="年龄" width="80"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
</el-table>
</div>
</template>
<script>
//引入安装的依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
data() {
return {
tableData: [
{
name: "张三",
age: 22,
date: "2016-05-02"
},
{
name: "王小虎",
age: 23,
date: "2016-05-04"
}
]
};
},
methods: {
// XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ，sheetjs.xlsx 即为导出表格的名字，可修改！
exportExcel() {
let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
let wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
"用户列表.xlsx"
);
return wbout;
}
}
};
</script>
<style scoped>
</style>3、效果图
此外，如果想导出指定的记录，可以参考这篇文章：https://www.jianshu.com/p/2819b563bfd7