Ant Design of Vue中导入EXCEL数据

最新推荐文章于 2024-06-22 16:44:35 发布

xiexienidehuangyan

最新推荐文章于 2024-06-22 16:44:35 发布

阅读量910

点赞数 2

文章标签： vue.js excel javascript

本文链接：https://blog.csdn.net/xiexienidehuangyan/article/details/130640277

版权

本文介绍如何在Ant Design Vue项目中导入EXCEL数据，包括前端控件代码展示和核心实现代码，涉及文件类型校验、EXCEL内容读取及数据格式验证。

摘要由CSDN通过智能技术生成

导入的EXCEL格式

项目需要安装的插件，红色框标注

前端控件代码

<a-upload name="file" :showUploadList="false" :multiple="false" :customRequest="importData"
accept=".xlsx,xls">
<a-button type="primary" icon="import" >导入</a-button>
</a-upload>

实现核心代码：

importData(file) {
window.console.log(file);
const types = file.file.name.slice(file.file.name.lastIndexOf('.'));
const fileType = ['.xlsx', '.xls'].some(item => item === types)
// console.log(file.name.lastIndexOf('.'), types, fileType);
// 校验格式
if (!fileType) {
this.$error({
title: '格式错误',
content: '请重新上传xls或者xlsx',
centered: true
});
return
}
let reader = new FileReader();
/*
reader.readAsBinaryString(file.file) 注意这个是传入的是file.file，
刚开始传的是file、不可以、ant框架是file.file
*/
reader.readAsBinaryString(file.file); //这个是file.file文件，可不是file……
reader.onload = async(ev) => {
try {
let res = ev.target.result;
let date = new Date() //日期
const worker = xlsx.read(res, { type: "binary" });
// 将返回的数据转换为json对象的数据
window.console.log(worker.Sheets[worker.SheetNames[0]]);
reader = xlsx.utils.sheet_to_json(worker.Sheets[worker.SheetNames[0]], { header: 1, defval: '' });
const tax = reader[1][1];
const ItemType = reader[0][1];
// const ValidityDateS = moment(new Date(parseInt(date.setTime(Math.round(getNowTime() * 24 * 60 * 60 * 1000 - 8 * 60 * 60 * 1000) + Date.parse("1899-12-30")).toString()))).format('YYYY-MM-DD');
const ValidityDateS = moment().format("YYYY-MM-DD");
const ValidityDateE = addMonth(ValidityDateS, 3);