En el proceso de desarrollo del proyecto, me encontré con el requisito de importar el archivo de Excel y analizarlo y representarlo en la página. Los usuarios pueden modificar parte del contenido del formulario y luego subirlo al servidor.
Importar Excel
1. Use html para admitir etiquetas de carga para obtener archivos localmente, como entrada con tipo de archivo, el-upload, etc.
2. Cree una instancia de FileReader y lea el archivo como una cadena binaria a través de readAsBinaryString. (Para conocer otros métodos proporcionados por FileReader, consulte la explicación detallada del ejemplo de FileReader en JavaScript_javascript skills_Script Home )
3. Use el método XLSX.read() del complemento XLSX para convertir la cadena binaria en el libro de trabajo del objeto del archivo de Excel (para el uso específico de XLSX, consulte Descripción general | SheetJS Community Edition )
4. A través del método XLSX.utils.sheet_to_json(), obtenga los primeros datos de la tabla Hojas del libro de trabajo y conviértalos en datos json
5. Reorganice los datos json para generar una matriz, es decir, recomponga los datos json que satisfagan sus propias necesidades de acuerdo con los nombres de campo de columna definidos por usted.
El código de implementación específico es el siguiente:
importFilePushTable(params) {
const _file = params.file
let workBook = null
let filetype = _file.name.split('.')[_file.name.split('.').length - 1]
let filetypes = '.xlsx,.xls'
if (filetypes.indexOf(filetype) === -1) {
this.$message.warning('请上传.xlsx,.xls文件。')
return
}
const reader = new FileReader()
reader.readAsBinaryString(_file)
reader.onload = (evt) => {
workBook = XLSX.read(evt.target.result, {
type: 'binary'
})
let excelData = []
for(let sheet in workBook.Sheets) {
excelData = excelData.concat(XLSX.utils.sheet_to_json(workBook.Sheets[sheet]))
}
this.tableData = excelData.map(obj => {
return {
date: this.formatDate(obj['日期'], '/'),
name: obj['姓名'],
sex: obj['性别'],
age: obj['年龄'],
educational: obj['学历'],
address: obj['地址'],
}
})
}
},Dado que es necesario importar Excel desde el front-end, pensemos en cómo resolver la exportación. ? ? ?
Importar a Excel
1. Convierta los datos que deben exportarse de acuerdo con el quinto paso de importación
2. A través del método XLSX.utils.book_new() del complemento XLSX, cree un libro de trabajo de objeto de libro de Excel
3. A través de XLSX.utils.json_to_sheet(), cree una hoja de trabajo de objeto de tabla de Excel.
4. A través de XLSX.utils.book_append_sheet(), genere el libro de Excel real
5. Utilice XLSX.writeFile() para generar un archivo de Excel.
exportFile(data) {
let exportData = JSON.parse(JSON.stringify(data)).map(obj => {
return {
'日期': obj.date,
'姓名': obj.name,
'性别': obj.sex,
'年龄': obj.age,
'学历': obj.educational,
'地址': obj.address,
}
})
const workBook = XLSX.utils.book_new()
const workSheet = XLSX.utils.json_to_sheet(exportData)
XLSX.utils.book_append_sheet(workBook, workSheet, 'sheet')
XLSX.writeFile(workBook, '导出Excel数据.xlsx')
},