我们的导出excel，方法多种多样，但是我这里的实现方式很简单，通俗易懂，我要导出的数据是当前页面的table内容，也是后台传过来的。
方法一：正常流程
今天来推荐使用一个插件vue-json-excel，
第一步：先下载
npm install vue-json-excel -S第二步：导入
找到main.js文件：
import JsonExcel from 'vue-json-excel';
Vue.component('downloadExcel', JsonExcel)第三步：添加组件
<--导出事件-->
<download-excel
class="blueBtn" id="blueBtnDownload" ref="blueBtnDownload"
:name="excelName" :fields="json_fields" :data="json_data" worksheet="My Worksheet"
>批量导出
</download-excel>这里先解释下，download-excel 组件的用法，重点是excel的构成变量
1.name：是导出excel表格的名称
2.fields ：是excel标格内容的表头
3.data：就是excek的内容了
4.worksheet：这个是excel表格的表页名称，如下图
...
第四步：变量定义
data(){
return{
//批量导出
excelName:"表格名称"//要导出表格的名称
json_fields: { //导出Excel表格的表头设置，中文部分是写在表格里，英文部分是参数名
'名字': 'name',
'年龄': 'age',
'性别': 'sex',
'号码': 'number',
},
json_data://导出的表格内容，注意都是字符串
[
{"name":"张三","age":"18","sex":"男","number":"1580009"},
{"name":"李四","age":"23","sex":"女","number":"1333098"},
{"name":"王五","age":"32","sex":"女","number":"1668880"},
{"name":"陈六","age":"14","sex":"男","number":"1789987"},
],
}
}第四步：点击导出
点击导出就跟下载差不多，打开表格，看导出的内容：
所以我们就导出成功了。
这里最重要的是什么？肯定是data内容拉，也就是我们会把当前或需要的内容导出，然后表格名称你自己定义。
方法二：伪装成按钮
但是这个不像按钮，我们想做像按钮那样的，把el-button按钮嵌套再download-excel组件里，看起来就是一个按钮了。
<download-excel
class="blueBtn" :data="json_data" :fields = "json_fields" id="blueBtnDownload"
worksheet = "My Worksheet" :name="excelName" ref="blueBtnDownload"
>
<el-button type="warning" icon="el-icon-top-right" @click="bn_openExport()">批量导出
</el-button>
</download-excel>
类似这样的按钮，我们点击就可以导出了。
因为我们的data内容可根据你要传的值来决定，所以根据按钮的click事件方法来赋值
bn_openExport(){
//假设这是你后台获取的内容，或者是你table表格的内容,shi json格式
var value = this.value;
for(let i=0;i<value .length;i++){
//我们把需要导出的值导出，json格式
this.json_data.push({"name":value[i].name,"age":value[i].age,"sex":value[i].sex,"number":value[i].number});
}
}可根据当前表格中，有没有让用户自己勾选想导出的内容，如果他不选，就默认导出当前的所有内容
// this.$confirm('检测到您没有选中任何终端，默认导出当前表格内容', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(()=>{
//没有勾选，默认导出当前表格内容,undefined为首次未勾选
this.json_data = [];//表格内容先置空
if(this.checkedList == undefined || this.checkedList.length == 0){//如果用户没有勾选
console.log("导出内容：",this.pages.values);
var test = this.pages.values;
for(let i=0;i<test.length;i++){
this.json_data.push({"name":value[i].name,"age":value[i].age,"sex":value[i].sex,"number":value[i].number})
}
}else{
console.log("勾选的内容:",this.pages.values);
var test = this.checkedList;
for(let i=0;i<test.length;i++){
this.json_data.push({"name":value[i].name,"age":value[i].age,"sex":value[i].sex,"number":value[i].number})
}
}
// });问题思考：
为了防止用户误点击，所以我们如果希望，再点击的时候，先弹出框告诉用户，让用户自行选择：
我们知道这个弹框的写法如下：
this.$confirm('你确定要导出吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{
//用户点击了确定按钮，执行
}).catch((err)=>{
this.$message({
message: "用户点击了取消",
type: "info",
});
});所以我们就可以最终实现：
bn_openExport(){
this.$confirm('你确定要导出吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{
//用户点击了确定按钮，执行
//假设这是你后台获取的内容，或者是你table表格的内容,shi json格式
var value = this.value;
for(let i=0;i<value .length;i++){
//我们把需要导出的值导出，json格式
this.json_data.push(
{"name":value[i].name,"age":value[i].age,"sex":value[i].sex,"number":value[i].number}
);
}
}).catch((err)=>{
this.$message({
message: "用户点击了取消",
type: "info",
});
});
}问题来了，根据上面的写法没有任何错误，但是点击确定按钮以后，这个没有任何反应，没有导出。目前知道的问题是这个download-excel只能点击一次，页就是在“批量导出的时候”，已经实现了，不可能在这个弹窗再次点击实现第二次。
这个问题如何解决？看方法三
方法三：解决与this.$confirm弹框共存的问题
第一步：事前准备：
1.那就用到另个插件：
npm install -S file-saver xlsx
npm install -D script-loader因为之前没有配置cnpm，下载一直卡在那里，然后我原来的xlsx下载的插件好像被冲掉了，编译不过去，只能用npm下就好了。
2.然后下载两个js：
Blob.js和Export2Excel.js（重点这个），下载路径：GitHub - MrBaiLiJie/importExcal: Vue + Element 实现导入Excel功能
文件下载后，解压，就在：
然后把它们复制到项目里，我就放到项目文件build中。
基本的导出写法如下：
不需要引用import我们安装的，省了这步
第二步：HTML
<el-button type="warning" icon="el-icon-top-right" @click="bn_openExport()">批量导出</el-button>第三步:定义变量
跟方法一的变量定义类似
data(){
return{
//批量导出
excelName:"表格名称",//要导出表格的名称
json_data://导出的表格内容，注意都是字符串
[
{"name":"张三","age":"18","sex":"男","number":"1580009"},
{"name":"李四","age":"23","sex":"女","number":"1333098"},
{"name":"王五","age":"32","sex":"女","number":"1668880"},
{"name":"陈六","age":"14","sex":"男","number":"1789987"},
],
}
}第四步：就是直接实现方法，在methods：
bn_openExport(){
this.$confirm("你确定要导出吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
//调用导出表格的方法
this.export2Excel();
}).catch(() => {
this.$message({
message: "已取消导出",
type: "info",
});
});
},
export2Excel() {
var $this = this;
require.ensure([], () => {
const { export_json_to_excel } = require("../../build/js/Export2Excel");//这个路径就是我们下载后放在项目中的
//这里必须使用绝对路径，根据自己的命名和路径
const tHeader = [
"userId",
"name",
"age",
"status",
]; // 导出的表头名
const filterVal = [
"userId",
"name",
"age",
"status",
]; // 导出的表头字段名,要插入内容数据需要一一对应
const list = this.json_data;
// this.excelData为传入的数据
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, `测试导出excel`); // 导出的表格名称，根据需要自己命名
// tHeader为导出Excel表头名称，`xxxxxx`即为导出Excel名称
});
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
},这里功能就实现完了，亲试可用，demo代码不用修改，然后你点击导出按钮，就直接下载了。
扩展需求：
1.如果用勾选了内容，那就导出用户勾选那些，如果用户什么都没有勾选，那就导出当前表格里的全部内容
2.表格名称由当前选择的而定，或自定义
//导出功能
bn_openExport(){//导出按钮
//1.如果用勾选了内容，那就导出用户勾选那些，如果用户什么都没有勾选，那就导出当前表格里的全部内容
this.$confirm("此操作将按照导入模板格式导出为excel文件供备份, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
//调用表格导出的方法
this.export2Excel();
}).catch(() => {
this.$message({
message: "已取消导出",
type: "info",
});
});
},
export2Excel() {//导出方法
this.json_data = [];//表格内容先置空
//用户是否勾选，如步勾选，则默认导出当前的，勾选仅导出勾选那些
if(this.checkedList == undefined || this.checkedList.length == 0){
console.log("导出内容：",this.pages.values);
var test = this.pages.values;
for(let i=0;i<test.length;i++){
this.json_data.push({"name":value[i].name,"age":value[i].age,"sex":value[i].sex,"number":value[i].number})
}
}else{
console.log("勾选的内容:",this.pages.values);
var test = this.checkedList;
for(let i=0;i<test.length;i++){
this.json_data.push({"name":value[i].name,"age":value[i].age,"sex":value[i].sex,"number":value[i].number})
}
}
var $this = this;
require.ensure([], () => {
//这里必须使用绝对路径，根据自己的命名和路径，之前下载的插件存放路径
const { export_json_to_excel } = require("../../build/js/Export2Excel");
const tHeader = [
"userId",
"name",
"age",
"status",
]; // 导出的表头名
const filterVal = [
"userId",
"name",
"age",
"status",
]; // 导出的表头字段名,要插入内容数据需要一一对应
const list = this.json_data;//数据内容
// this.excelData为传入的数据
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, this.excelName); //tHeader为表头，data为表内容，this.excelName导出的表格名称
// tHeader为导出Excel表头名称，this.excelName即为导出Excel名称
});
},
formatJson(filterVal, jsonData) {//数据插入表中
return jsonData.map(v => filterVal.map(j => v[j]));
},本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
