JS lit les données Excel
Pourquoi souhaitez-vous importer des données Excel ? Presque tous les systèmes impliquent la fonction d'ajout de données. Il existe deux façons d'ajouter des données. La première consiste à saisir manuellement des données. Vous ne pouvez saisir qu'une seule donnée à la fois. L'autre consiste à ajouter plusieurs éléments de données en important un fichier Excel.
Ensuite, nous utiliserons un exemple pour importer des données Excel
1. Exemple de code
<template>
<div class="hello">
<h1>{
{
msg }}</h1>
<h2>Essential Links</h2>
<el-row>
<el-col>
<el-upload
ref="upload"
action="/"
:show-file-list="false"
:on-change="(file, fileList) => {batchImport(file, fileList,importHeader)}"
:auto-upload="false"
style="margin-left: 30px;width:130px">
<el-button
style="width: 130px"
type="primary"
plain
icon="el-icon-upload2"
class="handle-del">批量导入
</el-button>
</el-upload>
</el-col>
</el-row>
</div>
</template>
<script>
import XLSX from "xlsx";
export default {
name: 'HelloWorld',
data () {
return {
xlsxJson: {
},
importHeader:["姓名","年龄"],
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
batchImport(file, fileList,header) {
// let file = file.files[0] // 使用传统的input方法需要加上这一步
const types = file.name.split(".")[1];
const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some(
(item) => item === types
);
if (!fileType) {
alert("格式错误！请重新选择");
return;
}
this.file2Xce(file,header).then((tabJson) => {
if (tabJson && tabJson.length > 0) {
this.xlsxJson = tabJson;
}
this.setLedgerList();
});
},
setLedgerList() {
let data = [];
this.xlsxJson[0].sheet.forEach((item) => {
data.push(item);
});
console.log(data)
// 这个data就可以传给后端，存入数据了
},
file2Xce(file,header) {
return new Promise(function (resolve, reject) {
const reader = new FileReader();
reader.onload = function (e) {
const data = e.target.result;
// XLSX.read返回值为WorkBook对象，包含整个文件的所有表
this.wb = XLSX.read(data, {
type: "binary",
});
const result = [];
//SheetNames包含了文件中所有的表明
this.wb.SheetNames.forEach((sheetName) => {
result.push({
sheetName: sheetName,
sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName], {
//header是设置表属性名，如果设置为数字，则属性名由0，1，2...表示
//此处设置的header为importHeader:["姓名","年龄"],最终结果的属性名对应该数组
header: header,
}),
});
});
console.log("result")
console.log(result)
//将excel文件第一张表的第一项(excel的第一行为属性名，应该去掉)删除
result[0].sheet.shift();
resolve(result);
};
reader.readAsBinaryString(file.raw);
// reader.readAsBinaryString(file) // 传统input方法
});
},
}
}
</script>
2. Analyse des résultats
2.1 Matériel
Le fichier excel contient deux tableaux
Tableau 1
Tableau 2
2.2 Analyse du code et résultats
La fonction file2Xce obtient les
résultats
de données de deux tables et parse les deux tables dans le fichier Excel.
Chaque table a deux attributs :
feuille : les données de la
table sheetName : le nom de la table Les données de la
première table, si le file2Xce fonction n'ajoute pas le paramètre d'en-tête , le nom de la propriété (marqué par la flèche rouge) ne sera pas affiché. La fonction
setLedgerList stocke les données dans la table dans data, qui est transmise au backend en tant que données du lien de requête suivant.
3. Résumé
La fonction file2Xce supprime ici simplement la valeur d'attribut de la première ligne de la première table, et la deuxième table n'est pas traitée, donc setLedgerList transmet simplement la valeur de la première table aux données.
Il y a quelques défauts dans cet exemple : les champs des deux tables utilisées dans cet exemple sont différents. Dans des circonstances normales, les champs des deux tables doivent être identiques, de sorte que le fonctionnement de plusieurs tables peut être réalisé via forEach, qui c'est-à-dire que les données des deux tables sont stockées dans data.