您的位置:首页 > Web前端

前端生成与读取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]
  • 点赞
  • 收藏
  • 分享
  • 文章举报
刘翾 博客专家 发布了167 篇原创文章 · 获赞 275 · 访问量 59万+ 他的留言板 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: