关于纯前端excel上传、下载功能_前端文件上传excel判断-CSDN博客

本文链接：https://blog.csdn.net/m0_68585247/article/details/126783556

工作项目中，表格的上传下载基本都是调取后端接口，把处理逻辑放在后端进行处理。那么纯前端js代码实现excel的上传下载是否可行？其实代码逻辑很简单，不过需要引用xlsx.js进行处理。下面是我自己写的一个关于国际化excel文件的上传下载功能。

HTML代码片段

<input type="file" onchange="dowmlodeExcel(this)">
<script type="text/javascript" src="https://unpkg.com/xlsx/dist/xlsx.core.min.js"></script>

获取本地excel表格，转化成数据，再进行数据整理

function dowmlodeExcel(source) {
    let file = source.files[0];
    let readExcelView = new FileReader();
    readExcelView.readAsBinaryString(file)  // 读取文件
    readExcelView.onload = (e) => {
      let data = e.target.result  // 获取传递的表格
      // 以二进制流方式读取到整份的excel 表格对象
      let workbook = XLSX.read(data, {
        type: 'binary'
      })
      let sheetData = []
      for (var sheet in workbook.Sheets) {  // 遍历每张表读取
        if (workbook.Sheets.hasOwnProperty(sheet)) {  // 判断文件是否是 excel 文件
          // 对表格的内容进行处理
          sheetData = sheetData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
          break;
        }
      }
      // 补全未翻译的（重复中文）
       sheetData.map((item) => {
          const index = sheetData.findIndex((k) => (k.Chinese === item.Chinese) &&  k.English)
          if (index > 0) {
            item.English = sheetData[index].English
          }
          return item
      })
      // 下载数据变更后的文件到本地
      downLoadExcel(sheetData,'翻译')
    }
  }

把整理过后的数据生成新的excel，并下载在本地

function downLoadExcel(data, fileName){
    //定义表头
    let str = 'key,Chinese,English\n';
    //增加\t为了不让表格显示科学计数法或者其他格式
    for(let i = 0 ; i < data.length ; i++ ){
        for(let item in data[i]){
                str+=`${data[i][item] + '\t'},`;          
        }
        str+='\n';
    }
    //解决中文乱码问题
    let url = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
    //创建a标签
    let link = document.createElement("a");
    link.href = url;
    link.download = `${fileName || '表格数据'}.xls`;
    document.body.appendChild(link);
    link.click();
    // 移除a标签
    document.body.removeChild(link);
}

以上的代码就可以完成一个简单的excel表格上传、下载的功能。接下来就找一个本地excel表格试一试吧！