Vue上传XLS文件
data() { return { tableData:[] } },
//原生JS+XLSX包实现 xls文件上传 methods: { //上传excel表格文件 uploadHandler(data){//对应的是 upload中的 => :http-request="uploadHandler" uploadHandler(data) { const file = data.file; //上传的excel文件 // 1 读取到的文件 const reader = new FileReader(); // 创建一个文件读取的实例 reader.readAsArrayBuffer(file) reader.onload = async (e) => { // 当onlaod事件的时候,文件读取完成 console.log(e.target.result) // 2 使用插件转成json格式 const filedata = e.target.result; // excel文件数据 // 3 利用XLSX对数据进行解析 const fileBook = await XLSX.read(filedata, { type: Array }) // 4 获取第一张表的表名 const sheetName = fileBook.SheetNames[0]; // 5 根据第一张表的表名获取这个表里面的内容 const sheetData = fileBook.Sheets[sheetName] // 6 解析数据体 const json = XLSX.utils.sheet_to_json(sheetData) console.log(json) // 7 显示在表格中 this.tableData = json; } } },