vue xlsx 导入导出_vue excel表格导入导出

导入，导出功能：

安装依赖：

cnpm install xlsx —save

使用：

html

导出

导入文件

js:

var XLSX = require('xlsx');

outfile(){

var that = this

var titleArr = Object.keys(that.tableData[0]);

let tableData = [

titleArr,

] // 表格表头

this.tableData.forEach (item => {

let rowData = []

titleArr.map((key,index) => {

rowData.push(item[key])

})

tableData.push(rowData)

})

let ws = XLSX.utils.aoa_to_sheet(tableData)

let wb = XLSX.utils.book_new()

XLSX.utils.book_append_sheet(wb,ws,'数据') // 工作簿名称

XLSX.writeFile(wb, '数据.xlsx') // 保存的文件名

},

importf() {

let _this = this;

let inputDOM = this.$refs.inputer; // 通过DOM取文件数据

this.file = event.currentTarget.files[0];

var rABS = false; //是否将文件读取为二进制字符串

var f = this.file;

//判断格式

const types = f.name.split(".")[1];

const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt"].some(

item => item === types

);

if (!fileType) {

alert("格式错误！请重新选择");

return;

}

var reader = new FileReader();

//if (!FileReader.prototype.readAsBinaryString) {

FileReader.prototype.readAsBinaryString = function(f) {

var binary = "";

var rABS = false; //是否将文件读取为二进制字符串

var pt = this;

var wb; //读取完成的数据

var outdata;

var reader = new FileReader();

reader.onload = function(e) {

var bytes = new Uint8Array(reader.result);

var length = bytes.byteLength;

for(var i = 0; i < length; i++) {

binary += String.fromCharCode(bytes[i]);

}

if(rABS) {

wb = XLSX.read(btoa(fixdata(binary)), { //手动转化

type: 'base64'

});

} else {

wb = XLSX.read(binary, {

type: 'binary'

});

}

// previwData就是你想要的东西 excel导入的数据

console.log(_this.previwData)

_this.previwData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);

_this.dialogSupplierListVisible = true

// console.log(outdata)

}

reader.readAsArrayBuffer(f);

}

if(rABS) {

reader.readAsArrayBuffer(f);

} else {

reader.readAsBinaryString(f);

}

}