方法一
Vue 将页面中表格数据导出excel
一、需要安装三个依赖：
npm install -S file-saver xlsx
npm install -D script-loader二、项目中新建一个文件夹：（vendor—名字任取）
里面放置两个文件Blob.js和 Export2Excel.js。
链接：https://pan.baidu.com/s/1krRDSw6PHylWlg5yslwZGA 密码：qotw
下载后直接将文件夹放到src目录下即可。
三、在.vue文件中
在methods里写这两个方法：其中list是表格的内容
// 导出表格
export2Excel() {
require.ensure([], () => {
let { exportJsonToExcel } = require('../../vendor/Export2Excel');
// 表头
let tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码'];
//表头对应字段名，要和下面数据key对应
let filterVal = ['iAutoID', 'Address', 'AuctionDate', 'Area'];
// 数据来源
// let list = this.serachData;
//模拟数据
let list = [
{iAutoID: "4737", Address: "海门市海门镇南海路南、长江路东侧", AuctionDate: "0000-00-00", Area: ""},
{iAutoID: "21337", Address: "上海市浦东新区东至:A13B-01地块,南至:A13B-01地块,西至:国展路,北至:A13B-01地块",Area: ""},
{iAutoID: "17373", Address: "白马大道以东、建业路以北", AuctionDate: "0000-00-00", Area: ""},
{iAutoID: "17271", Address: "黄陂区横店街川龙大道以东、横中路以北", AuctionDate: "0000-00-00", Area: "黄陂"},
{iAutoID: "20577", Address: "南通市海门四甲镇东渐大道北侧、军工路南侧", AuctionDate: "0000-00-00", Area: ""},
{iAutoID: "18929", Address: "奥诺斯特以东、黄河路以南", AuctionDate: "2018-09-21", Area: ""}]
let data = this.formatJson(filterVal, list); //数据格式化
var index1 = '资源列表';//导出时文件名
exportJsonToExcel(tHeader, data, index1); //导出文件
})
},
// 数据格式化
formatJson(filterVal, jsonData){
return jsonData.map(v => filterVal.map(j => v[j]))
},四、添加按钮导出调用export2Excel方法
<el-button plain size="mini" @click="export2Excel" >导出数据</el-button>方法二
将table标签，包括tr、td等对json数据进行拼接，将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件形式上还是html，代码如下
<template>
<button @click="tableToExcel">导出</button>
</template>
<script>
export default {
data() {
return {
jsonData: [
{
name: "路人甲",
phone: "123456",
email: "123@123456.com"
},
{
name: "炮灰乙",
phone: "123456",
email: "123@123456.com"
},
{
name: "土匪丙",
phone: "123456",
email: "123@123456.com"
},
{
name: "流氓丁",
phone: "123456",
email: "123@123456.com"
}
]
};
},
methods: {
tableToExcel() {
//要导出的json数据
//列标题
let str = "<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>";
//循环遍历，每行加入tr标签，每个单元格加td标签
for (let i = 0; i < jsonData.length; i++) {
str += "<tr>";
for (let item in jsonData[i]) {
//增加\t为了不让表格显示科学计数法或者其他格式
str += `<td>${jsonData[i][item] + "\t"}</td>`;
}
str += "</tr>";
}
//Worksheet名
let worksheet = "Sheet1";
let uri = "data:application/vnd.ms-excel;base64,";
//下载的表格模板数据
let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>${worksheet}</x:Name>
<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
</head><body><table>${str}</table></body></html>`;
//下载模板
window.location.href = uri + base64(template);
}
//输出base64编码
function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }
}
};
</script>方法三
通过将json遍历进行字符串拼接，将字符串输出到csv文件，代码如下
<template>
<button @click="tableToExcel">导出</button>
</template>
<script>
export default {
data() {
return {
jsonData: [
{
name: "路人甲",
phone: "123456",
email: "123@123456.com"
},
{
name: "炮灰乙",
phone: "123456",
email: "123@123456.com"
},
{
name: "土匪丙",
phone: "123456",
email: "123@123456.com"
},
{
name: "流氓丁",
phone: "123456",
email: "123@123456.com"
}
]
};
},
methods: {
tableToExcel() {
//列标题，逗号隔开，每一个逗号就是隔开一个单元格
let str = `姓名,电话,邮箱\n`;
//增加\t为了不让表格显示科学计数法或者其他格式
for (let i = 0; i < jsonData.length; i++) {
for (let item in jsonData[i]) {
str += `${jsonData[i][item] + "\t"},`;
}
str += "\n";
}
//encodeURIComponent解决中文乱码
let uri = "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);
//通过创建a标签实现
let link = document.createElement("a");
link.href = uri;
//对下载的文件命名
link.download = "json数据表.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
};
</script>