前端生成与读取Excel的两种框架使用方法
2020-04-05 07:16
1021 查看
xlsx
xlsx github地址 https://github.com/SheetJS/js-xlsx
安装依赖:
1. <script lang="javascript" src="dist/xlsx.full.min.js"></script> // 此文件可以在上面的github地址找到 2. npm install xlsx
使用方法:
导入Excel
// 例子: 本例代码出处 https://github.com/SheetJS/js-xlsx/tree/master/demos/react 基于官方例子做了些许修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <label for="myinput">上传文件</label> <input accept=".xlsx,.xls" id="myinput" type="file" /> <script src="./xlsx.full.min.js"></script> <script> // 生成一个列对象组成的数组 function make_cols(refstr) { let o = [], C = XLSX.utils.decode_range(refstr).e.c + 1; for(var i = 0; i < C; ++i) o[i] = {name:XLSX.utils.encode_col(i), key:i} return o; }; function handleExcelFileChange(file) { const files = file.target.files; if(files && files[0]) { const reader = new FileReader(); const rABS = !!reader.readAsBinaryString; reader.onload = (e) => { const bstr = e.target.result; const wb = XLSX.read(bstr, {type:rABS ? 'binary' : 'array'}); /* Get first worksheet */ const wsname = wb.SheetNames[0]; const ws = wb.Sheets[wsname]; /* Convert array of arrays */ const data = XLSX.utils.sheet_to_json(ws); // 上面这个sheet_to_json可配置的参数 {header:1, raw:true, cellDates:true} console.log(ws, data, make_cols(ws['!ref'])) }; if(rABS) reader.readAsBinaryString(files[0]); else reader.readAsArrayBuffer(files[0]); } } const input = document.getElementById('myinput'); input.addEventListener('change', handleExcelFileChange); </script> </body> </html>[/code]
导出Excel
// 例子: 本例代码出处 https://github.com/SheetJS/js-xlsx/tree/master/demos/react 基于官方例子做了些许修改 function exportFile() { /* convert state to workbook */ const ws = XLSX.utils.aoa_to_sheet([[1,2,3], [1,2,3]]); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "SheetJS"); /* generate XLSX file and send to client */ XLSX.writeFile(wb, "sheetjs.xlsx") };[/code]
js-export-excel
安装依赖
https://github.com/cuikangjie/js-export-excel
npm install js-export-excel
导出excel
// 本例代码出自https://coding.cuikangjie.com/content/26/%E7%BA%AFJS%E5%AF%BC%E5%87%BAexcel%EF%BC%88%E6%94%AF%E6%8C%81%E4%B8%AD%E6%96%87%EF%BC%89 const ExportJsonExcel = require('js-export-excel') var option={}; option.fileName = 'excel' option.datas=[ { sheetData:[{one:'一行一列',two:'一行二列'},{one:'二行一列',two:'二行二列'}], sheetName:'sheet', sheetFilter:['two','one'], sheetHeader:['第一列','第二列'], columnWidths: [20, 20] }, { sheetData:[{one:'一行一列',two:'一行二列'},{one:'二行一列',two:'二行二列'}] } ]; var toExcel = new ExportJsonExcel(option); //new toExcel.saveExcel(); //保存[/code]
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- java基于jxl.jar包生成Excel文件到指定目录和服务器下载两种模式的使用方法
- 使用jxl工具包生成Excel以及读取Excel的方法
- PHP使用imagick读取PDF生成png缩略图的两种方法
- ZK框架简介,以及在ZK下使用JXL读取Excel模板,导出数据模型到Excel的方法
- PHP使用imagick读取PDF生成png缩略图的两种方法
- BasicExcel使用方法,VC读取Excel方法
- 在c#中读取Excel文件提供两种方法
- 在structs框架下使用JXL文件读取工具将Excel表格导入本地数据库
- PHP-Excel读取导入Excel数据到数据库(2003,2007通用)使用方法
- 二十一、【.Net开源框架】EFW框架Web前端开发之目录结构和使用FireBug调试方法
- 使用PHP生成二维码的两种方法(带logo图像)
- 二维码的两种生成方法(前端js生成,后端java生成)
- Java 使用 poi生成 Excel的方法
- 使用PHP生成二维码的两种方法(带logo图像)
- 使用PHP生成二维码的两种方法(带logo图像)
- 使用PHP生成二维码的两种方法(带logo图像)
- 【转】c# 读取excel数据的两种方法
- Python从excel读取数据,并使用scipy进行散点的平滑曲线化方法
- 使用MyBatis Generator自动生成持久层CRUD代码的两种方法
- DataGridView扩展方法行号、全选、导出到Excel(引用excel组件、生成html两种方式)