使用JS实现纯前端Excel的导入导出 |
您所在的位置：网站首页 › revit如何导入pdf › 使用JS实现纯前端Excel的导入导出 |
|
前言
使用js-xlsx库实现前端对Excel表的导入，修改和导出 引入NPM npm i xlsx --save-dev import xlsx from xlsx 复制代码包直接引入 复制代码下载地址 github.com/SheetJS/js-… 话不多说，直接上代码开撸 html // 导入Excel // 渲染生成表格 复制代码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 += `${v}` }) tr = `${td}`; table += tr; 这里可以进行对文档的处理并保存成新的文档，便于后面导出新文档 newExcel += `${v}\n` }) // 渲染生成表格 table = ` ${table} ` document.querySelector('.table').innerHTML = table downloadExcel(newExcel) } 复制代码导出文档 function downloadExcel(newExcel) { const url = 'data:text/csv;,\ufeff' + encodeURIComponent(newExcel); const link = document.createElement("a"); link.href = url; // 文件名 link.download = "数据表.xls"; link.click(); } 复制代码 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |