前几天接到一个需求，服务端是个老的项目不好在上面维护，就需要前端读取excel文件，然后传给接口。
心想真的是狗～，还需要前端去搞这文件大了时间不是特别长嘛，但是PD说没关系，没关系就没关系吧，直接开干～
声明一下这个项目居然是通过JQ来写，一万匹MMP跑过，但是谁让咱们就是吃这碗饭的呢，没办法开搞吧
dom
<input type="file" class="excel-file">
<button class="out">
复制代码
function 解析excel
// 首先引入JQ。
// 获取咱们的input type-file的don对象
let list=[]; // 存储解析出来的excel内容
let titleList=[]; // 将excel头部的数据获取到存起来
$('.excel-file').change(function (e: any) {
var files = e.target.files; // 获取到文件流
var fileReader = new FileReader(); // 创建解析文件流的实例
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'];
list = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
break; // 如果只取第一张表，就取消注释这行
}
}
titleList = Object.keys(list[0] || {});
}
//然后我们在以二进制的方式打开文件
fileReader.readAsBinaryString(files[0]);
e.target.value = null;
// 去做你想做的任何事情
.......
复制代码
function 下载处理好的excel文件到本本地
/**
* 注: ! outlist中数据中对象的顺序要和 titleList数组中的字段顺序一样，不然会导致导出的数据混乱
* @param {*} titleList type Array excel的表头列表 titleList=['one，‘two']
* @param {*} outlist type Array excel内容 outlist=[{},{},{}]
* @param {*} name 导出文件的名字 string
*/
$('.out').click(function (e: any) {
// 导出前要将json转成table格式
// 将列标题放到td中
let str = '';
titleList.forEach(element => {
str += `<td>${element}</td>`;
});
str = `<tr>${str}</tr>`;
//具体数值 遍历
for (let i = 0; i < outlist.length; i++) {
str += '<tr>';
for (let item in outlist[i]) {
var cellvalue = outlist[i][item];
//不让表格显示科学计数法或者其他格式
//方法1 tr里面加 style="mso-number-format:'\@';" 方法2 是改为 = 'XXXX'格式
//如果纯数字且超过15位
/*var reg = /^[0-9]+.?[0-9]*$/;
if ((cellvalue.length>15) && (reg.test(cellvalue))){
// cellvalue = '="' + cellvalue + '"';
}*/
//此处用 `取代'，具体用法搜索模板字符串 ES6特性
str += `<td style="mso-number-format:'\@';">${cellvalue}</td>`;
// str+=`<td>${cellvalue}</td>`;
}
str += '</tr>';
}
var worksheet = '导出结果'
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><!--[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>`;
//下载模板
function base64(s) { return window.btoa(unescape(encodeURIComponent(s))) }
// 自定义文件名
const dlink = document.createElement('a');
dlink.href = uri + base64(template);
dlink.download = `${name}.xls`;
document.body.appendChild(dlink);
dlink.click();
// 默认使用“下载”为文件名
// window.location.href = uri + base64(template);
}
复制代码
此文章也是借鉴了其他文章，具体是哪一篇已经找不到了～