Vue input上传excel文件
<input type="file" ref="upload" accept=".xls, .xlsx" class="outputlist_upload file"> import XLSX from 'xlsx'; data() { return { outputs:
·
<input type="file" ref="upload" accept=".xls, .xlsx" class="outputlist_upload file">
import XLSX from 'xlsx';
data() {
return {
outputs: [],
};
},
mounted() {
this.$refs.upload.addEventListener('change', (e) => {
// 绑定监听表格导入事件
this.readExcel(e);
});
},
methods: {
readExcel(e) {
// 表格导入
const that = this;
const { files } = e.target;
console.log(files);
if (files.length <= 0) {
// 如果没有文件名
return false;
}
if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
this.$Message.error('上传格式不正确,请上传xls或者xlsx格式');
return false;
}
const fileReader = new FileReader();
fileReader.onload = (ev) => {
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
type: 'binary',
});
const wsname = workbook.SheetNames[0]; // 取第一张表
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); // 生成json 表格内容
console.log(ws);
that.outputs = []; // 清空接收数据
// 编辑数据
ws.map((i) => {
const sheetData = {
address: ws[i].addr,
value: ws[i].value,
};
that.outputs.push(sheetData);
return '';
});
this.$refs.upload.value = '';
} catch (e) {
return false;
}
};
fileReader.readAsBinaryString(files[0]);
},
},
更多推荐
已为社区贡献3条内容
所有评论(0)