需求介紹
點(diǎn)擊“模板下載”按鈕，下載excel模板淮悼，填寫(xiě)好數(shù)據(jù)之后點(diǎn)擊“批量上傳”按鈕將數(shù)據(jù)push進(jìn)下方的表格中咐低，如果手機(jī)號(hào)與表格中的重復(fù)，或者是與excel其他行重復(fù)袜腥，這條數(shù)據(jù)不進(jìn)行push操作见擦，整體彈框提交時(shí)才會(huì)與后端進(jìn)行交互钉汗。
image.png
相關(guān)技術(shù)棧、組件
vue3+antDesignVue（a-upload組件）+xlsx
具體實(shí)現(xiàn)
模板下載
<a href="/static/模板.xlsx" download="模板">
<a-button @click="" class="ml-10" v-if="showUpload">模板下載</a-button>
</a>
這個(gè)功能很簡(jiǎn)單鲤屡，需要注意的就是模板的位置需要放在\public\static\下面
image.png
批量下載
npm i xlsx
<a-upload
v-if="showUpload"
class="ml-10"
v-model:file-list="fileList"
name="file"
action="/"
@change="handleChange"
:showUploadList="false"
>
<a-button> 批量上傳 </a-button>
</a-upload>
const handleChange = async (info) => {
if (info.file.status != "error") return;
const types = info.file.name.split(".")[1];
const fileType = ["xlsx", "xls"].some((item) => item === types);
if (!fileType) {
proxy.$smallMsgFn("請(qǐng)上傳正確的模板文件","error");
return;
}
let dataBinary = await readFile(info.file);
let workBook = xlsx.read(dataBinary, {
type: "binary",
cellDates: true,
});
let workSheet = workBook.Sheets[workBook.SheetNames[0]];
const excelData = xlsx.utils.sheet_to_json(workSheet, { header: 1 });
let arr = [];
excelData.forEach((v, i) => {
if (i == 0) return;
if (v && v.length > 0) {
let flag =
!tabObj.tableData.some((i) => i.phone == v[3]) &&
!arr.some((i) => i.phone == v[3]);
if (flag) {
arr.push({
// rowId: v[0],
userName: v[1],
validate: v[2]?dayjs(v[2]).format("YYYY-MM-DD"):'',
phone: v[3]?.toString(),
});
} else {
proxy.$smallMsgFn("請(qǐng)上傳正確格式的數(shù)據(jù)","error");
return;
}
}
});
tabObj.tableData = [...tabObj.tableData, ...arr];
tabObj.tableDataCopy = [...tabObj.tableDataCopy, ...arr];
};
const readFile = (file) => {
return new Promise((resolve) => {
let reader = new FileReader();
reader.readAsBinaryString(file.originFileObj);
reader.onload = (ev) => {
resolve(ev.target?.result);
};
});
};
有幾個(gè)點(diǎn)需要注意下：
- 1.
if (info.file.status != "error") return;根據(jù)官方文檔顯示损痰，上傳的狀態(tài)有很多種：uploading done error removed，寫(xiě)的時(shí)候發(fā)現(xiàn)uploading狀態(tài)不是只出現(xiàn)一次酒来，往表格push數(shù)據(jù)的時(shí)候會(huì)重復(fù)卢未，所以用的error狀態(tài)做判斷，保證onchange里面的方法都只執(zhí)行一次 - 2.a-upload組件會(huì)將file外面再封裝一層堰汉，所以file.originFileObj才是真正的源文件辽社，不然的話
reader.readAsBinaryString會(huì)報(bào)錯(cuò)Failed to execute ‘readAsBinaryString’ on ‘FileReader ‘: parameter 1 is not of type ‘Blob‘
打印onchange的入?yún)?png - 3.在往table中push的時(shí)候，需要注意數(shù)據(jù)的格式翘鸭，比如我這里的手機(jī)號(hào)在excel中默認(rèn)是Number類型滴铅，但接口請(qǐng)求的時(shí)候需要String格式。
大功告成就乓！
