我是借鑒使用h5的示例代碼,完成這個(gè)功能的植锉,先將h5代碼奉上:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
</head>
<body>
<input type="file"onchange="importf(this)" />
<script>
var wb;//讀取完成的數(shù)據(jù)
var rABS = false; //是否將文件讀取為二進(jìn)制字符串
function importf(obj) {//導(dǎo)入
// console.log(obj)
if(!obj.files) {
return;
}
var f = obj.files[0];
// console.log(obj)
console.log(f)
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
if(rABS) {
wb = XLSX.read(btoa(fixdata(data)), {//手動(dòng)轉(zhuǎn)化
type: 'base64'
});
} else {
wb = XLSX.read(data, {
type: 'binary'
});
}
//wb.SheetNames[0]是獲取Sheets中第一個(gè)Sheet的名字
//wb.Sheets[Sheet名]獲取第一個(gè)Sheet的數(shù)據(jù)
// document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );
let data1 = JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );
console.log(data1)
};
if(rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
}
function fixdata(data) { //文件流轉(zhuǎn)BinaryString
var 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;
}
</script>
</body>
</html>
復(fù)制該代碼辫樱,即可將上傳的Excel文件中的數(shù)據(jù)打印在控制臺(tái)中,如果將rABS 改為true俊庇,則將文件讀取為二進(jìn)制字符串狮暑,關(guān)鍵點(diǎn):
使用XLSX.read(data, {type: 'binary'});
方法讀取fileReader中的結(jié)果,然后再使用XLSX.utils.sheet_to_json()方法將數(shù)據(jù)轉(zhuǎn)換成數(shù)組字符串
以下為vue代碼:
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:on-success="handleAvatarSuccessA"
:on-change="importf"
>
<n-button dark title="導(dǎo)入" @click="submitUpload" src="static/export.png"></n-button>
</el-upload>
data(){
return{
rABS:false,
wb:''
}
}
importf(file){
this.file = file;
const isLt5M = file.size/1024/1024 < 5;
const extention = file.name.split('.')[1] === 'xls';
const extention2 = file.name.split('.')[1] === 'xlsx';
// console.log(extention,extention2,isLt5M)
if(!extention&&!extention2){
this.$message.warning('長(zhǎng)傳的文件只能是Excel')
return false
}
if(!isLt5M){
this.$message.warning('文件大小不能超過(guò)5MB')
return false
}
let data1 = XLSX.utils.sheet_to_json(file.name)
var f = file.raw;
var that = this;
var reader = new FileReader();
reader.onload = function(e) {
// console.log(e)
let wb = that.wb
var data = e.target.result;
if(that.rABS) {
wb = XLSX.read(btoa(that.fixdata(data)), {//手動(dòng)轉(zhuǎn)化
type: 'base64'
});
} else {
wb = XLSX.read(data, {
type: 'binary'
});
}
// wb.SheetNames[0]是獲取Sheets中第一個(gè)Sheet的名字
// wb.Sheets[Sheet名]獲取第一個(gè)Sheet的數(shù)據(jù)
// document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );
let data1 = JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );
console.log(data1)
};
if(this.rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
},
fixdata(data) { //文件流轉(zhuǎn)BinaryString(不需要此功能可以刪掉)
var 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;
},