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, '\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");