前几天接到一个需求，服务端是个老的项目不好在上面维护，就需要前端读取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);
}

前端解析excel文件

前几天接到一个需求，服务端是个老的项目不好在上面维护，就需要前端读取excel文件，然后传给接口。

心想真的是狗～，还需要前端去搞这文件大了时间不是特别长嘛，但是PD说没关系，没关系就没关系吧，直接开干～

声明一下这个项目居然是通过JQ来写，一万匹MMP跑过，但是谁让咱们就是吃这碗饭的呢，没办法开搞吧

dom

function 解析excel

function 下载处理好的excel文件到本本地

此文章也是借鉴了其他文章，具体是哪一篇已经找不到了～

最新版本请移步 juejin.cn/post/703365…