使用JS实现纯前端Excel的导入导出

前言

使用js-xlsx库实现前端对Excel表的导入，修改和导出

引入

NPM

   npm i xlsx --save-dev
   import xlsx from xlsx

包直接引入

<script type="text/javascript" src="./js/xlsx.core.min.js"></script>

下载地址 github.com/SheetJS/js-…

话不多说，直接上代码开撸

html

// 导入Excel
<input type="file" id="excel" />
// 渲染生成表格
<div class="table"></div>

js

// 获取上传的Excel文件
document.querySelector('#excel').onchange = (e) => {
    // 获取excel文档
    const file = e.target.files[0]
    readWorkbookFromLocalFile(file, (e) => {
        readWorkbook(e);
    })
}

function readWorkbookFromLocalFile(file, callback) {
    // 使用FileReader对象存储xslx文档
    var reader = new FileReader();
    
    reader.onload = function(e) {
        var data = e.target.result;
        // type一定要使用binary
        var workbook = XLSX.read(data, {type: 'binary'});
        
        if(callback) callback(workbook);
    };
    
    reader.readAsBinaryString(file);
}

转成cvs 要注意Execel表格内容不能包含英文的逗号不然解析出来的数据格式会有问题，因为到时候是使用逗号进行字符串切割，分割成同行的多个单元格

function readWorkbook(workbook) {
    let tableList = []
    const sheetNames = workbook.SheetNames;
    sheetNames.map((sheetName, index) => {
      // 生成cvs 文档
      const csv = XLSX.utils.sheet_to_csv(workbook.Sheets[sheetName])
      将文档切割成每一行数据，并且过滤空行
      const csvList = csv.split('\n').filter(v => v !== ',,,,')
      tableList.push(csvList)
    })
    let newExcel = '';
    let table = ``;
    // 示例使用第一张表里头的内容进行分析
    tableList[0].map((v,i) => {
        let tr = ``;
        let td = ``;
        const vArr = v.split(',')
        vArr.map(v => {
            td += `<td>${v}</td>`
        })
        tr = `<tr>${td}</tr>`;
        table += tr;
        这里可以进行对文档的处理并保存成新的文档，便于后面导出新文档
        newExcel += `${v}\n`
    })
    // 渲染生成表格
    table = `<table> ${table} </table>`
    document.querySelector('.table').innerHTML = table
    downloadExcel(newExcel)
}

导出文档

function downloadExcel(newExcel) {
    const url = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(newExcel);
    const link = document.createElement("a");
    link.href = url;
    // 文件名
    link.download =  "数据表.xls";
    link.click();
}