前端实现导出功能
主要是利用XML文件和Excel文件之间可以互相转换，因此可以将XML数据从web服务中导出到Excel中
下面是实现代码和注释(因为一般导出都是导出table的数据，所以直接整table)：
function tableToExcel(titleList = [], dataSource = [], fileName = "") {
// titleList：要导出的标题
// dataSource：处理的数据，源数据
// fileName：导出文件默认名
// 这样做是为了在很多数据的时候 导出自己想要的数据
let newDataSource = []
for (let i = 0; i < dataSource.length; i++) {
let tep = {};
titleList.forEach(({ key }) => { //key是colums中的每个key(name..age...)
tep[key] = dataSource[i][key] // 只取出titleList中对应的数据，就是需要的数据
})
newDataSource.push(tep)
}
let str = '<tr>'; // 需要导出的数据
for (let i = 0; i < titleList.length; i++) {
str += `<td>${titleList[i].title + '\t'}</td>`; // 进行字符串拼接， 拼接出表头
}
str += '</tr>';
str += '<tr>'; // 下面是table的内容拼接
for (let i = 0; i < newDataSource.length; i++) {
for (let item in newDataSource[i]) {
let news = newDataSource[i][item] || newDataSource[i][item] === 0 ? newDataSource[i][item] : "";
//style="mso-number-format:\'@\'" => 代表在excel中的科学计数
//\t制表符 tab到下一行
str += `<td style="mso-number-format:\'@\'">${news + '\t'}</td>`;
}
str += '</tr>';
}
// 这是一种数据URL编码格式，在这个编码格式下，数据以base64加密的方法嵌入到URI中，用于表示Excel格式的文件数据
// 具体的说：`data:application/vnd.ms-excel`部分表示这是一种excel格式的文件
// 而`base64`部分则表示数据被编码成Base64字符串
// 整个数据URI中的数据部分是经过base64编码后的数据
var uri = 'data:application/vnd.ms-excel;base64,';
// 导出的模板
var 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><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<!-- 导出文件的名称fileName -->
<x:Name>${fileName}</x:Name>
<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
<!-- 导出文件的内容str -->
</head><body><table>${str}</table></body></html>`;
// `btoa`是将二进制字符串编码为`base64编码`的`ASCLL`字符串
// `encodeURIComponent`通过将特定字符的每个实例替换成代表字符的`UTF-8`编码的一个、两个、三个或四个转义序列来编码`URI`，并且比`encodeURI`能编码更多
// `decodeURI`能解码由`encodeURI`创建或其他流程得到的统一资源标识符
var base64 = function (s) { return window.btoa(decodeURI(encodeURIComponent(s))) }
var link = document.createElement("a");
link.href = uri + base64(template); // 设置链接
link.download = fileName ? fileName + ".xls" : "数据.xls";//当前下载的excel名称
document.body.appendChild(link);
link.innerHTML = "点击下载"
console.log(unescape(encodeURIComponent(template)))
link.click();
document.body.removeChild(link);
}
行百里者半九十
