https://www.jianshu.com/p/8f9961a10e5b
1，引入 js-xlsx
npm install xlsx或<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.1/xlsx.full.min.js"></script>
2，利用<input type='file'>的onchange触发事件获取EXCEL文件对象
<input type='file' onchange="importFileDemo">
js(按照注释序号顺序执行)
import XLSX from 'xlsx'
function importFileDemo(obj){//1.onchange事件绑定方法出发
//2.如果没有选中文件则取消
if (!obj.target.files){
return
}
//3.获得选择的文件对象
var f = obj.target.files[0]
//4.初始化新的文件读取对象，浏览器自带，不用导入
var reader = new FileReader();
//5.绑定FileReader对象读取文件对象时的触发方法
reader.onload = function(e){
//7.获取文件二进制数据流
var data = e.currentTarget.result;
//8.利用XLSX解析二进制文件为xlsx对象
var wb = XLSX.read(data,{type:'binary'})
//9.利用XLSX把wb第一个sheet转换成JSON对象
//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
//wb.Sheets[Sheet名]获取第一个Sheet的数据
var j_data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
//10.在终端输出查看结果
console.log(j_data)
}
//6.使用reader对象以二进制读取文件对象f，
reader.readAsBinaryString(f)
}
html页面
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.1/xlsx.full.min.js"></script>
<!-- <canvas id="myCanvas" width="1000" height="700" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas> -->
<input type="file" onchange="importf(this)" />
<script>
let wb;//读取完成的数据
let rABS = true; //是否将文件读取为二进制字符串
// let replacer = null;
function replacer(key, value) {
// console.log(key + ':' + value);
return value;
}
function importf(obj) {//导入
console.log('obj---',obj)
if (!obj.files) {
return;
}
let f = obj.files[0];
let reader = new FileReader();
reader.onload = function (e) {
console.log('obj--e-',e)
let data = e.target.result;
// console.log(data);
if (rABS) {
wb = XLSX.read(btoa(fixdata(data)), {//手动转化
type: 'base64'
});
} else {
wb = XLSX.read(data, {
type: 'binary'
});
}
let xlsxData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
let list1 = getList1(wb);
xlsxData = AddXlsxData(xlsxData, list1);
//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
//wb.Sheets[Sheet名]获取第一个Sheet的数据
document.getElementById("demo").innerHTML = JSON.stringify(xlsxData, replacer, ' ');
};
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
}
function fixdata(data) { //文件流转BinaryString
let o = "",
l = 0,
w = 10240;
for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
return o;
}
// 获取excel第一行的内容
function getList1(wb) {
let wbData = wb.Sheets[wb.SheetNames[0]]; // 读取的excel单元格内容
let re = /^[A-Z]1$/; // 匹配excel第一行的内容
let arr1 = [];
for (let key in wbData) { // excel第一行内容赋值给数组
if (wbData.hasOwnProperty(key)) {
if (re.test(key)) {
arr1.push(wbData[key].h);
}
}
}
return arr1;
}
// 增加对应字段空白内容
function AddXlsxData(xlsxData, list1) {
let addData = null; // 空白字段替换值
console.log(xlsxData)
for (let i = 0; i < xlsxData.length; i++) { // 要被JSON的数组
for (let j = 0; j < list1.length; j++) { // excel第一行内容
if (!xlsxData[i][list1[j]]) {
xlsxData[i][list1[j]] = addData;
}
}
}
return xlsxData;
}
</script>
</body>
</html>
JS导出JSON到EXCEL文件
xlsx组件几个重要组成对象和函数
- workbook, 技术xlsx整个文件
- worksheet, xlsx文件里的sheet,一个workbook由多个worksheet组成
- XLSX.utils.json_to_sheet方法，将json数据转换成worksheet对象
例子：
/* 需要导出的JSON数据 */
var data = [
{"name":"John", "city": "Seattle"},
{"name":"Mike", "city": "Los Angeles"},
{"name":"Zach", "city": "New York"}
];
/* 如果没有导入xlsx组件则导入 */
if(typeof XLSX == 'undefined') XLSX = require('xlsx');
/* 创建worksheet */
var ws = XLSX.utils.json_to_sheet(data);
/* 新建空workbook，然后加入worksheet */
var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "People");
/* 生成xlsx文件 */
XLSX.writeFile(wb, "sheetjs.xlsx");