js读取excel文件，JS导出JSON到EXCEL文件

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>

<!– <canvas id=”myCanvas” width=”1000″ height=”700″ style=”border:1px solid #d3d3d3;”>

Your browser does not support the HTML5 canvas tag.

</canvas> –>

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, \’\t\’);

};

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");

本文链接：https://www.cnblogs.com/zwjun/p/13725385.html

js读取excel文件，JS导出JSON到EXCEL文件

2，利用`<input type=\'file\'>`的`onchange`触发事件获取EXCEL文件对象

JS导出JSON到EXCEL文件