need
The user uploads the existing excel to the system and synchronizes the excel data to the table on the page for secondary editing. Since the excel data is not the final data, it is just an initial template in batches, and the backend does not need to be stored, so this function is independently completed by the frontend.
Make complaints
I went through the trilogy of file upload, download and preview on the system, but I never expected that I would have to synchronize the data by myself.
actual
I started to check various materials with my backhand, and finally found a way to perfectly realize this requirement to record my implementation plan. I hope it will be helpful to friends in need.
Pay attention to the following text (important content), read it carefully, and do not miss important knowledge points~
The main knowledge points involved
- Plugin xlsx
- elementUI Upload upload component in plus
- Dynamically set ref
Expand and talk:
1. Plugin xlsx
// Install xlsx in the project root pathnpm install -S xlsx //Introduce xlsx on the page you need to useimport * as xlsx from 'xlsx'
2. Upload upload component
Automatic upload method and parameter transfer method of upload component, detailed readingelementUI plus official website
3. Dynamically set ref
Reasons involved in dynamically setting ref:
First, because the upload component has set :limit="1", after uploading the first file, the browser will save the file we have uploaded, resulting in the page not responding when we continue to upload the file; to solve this problem, you need to clear the uploaded file through ref in the on-success hook function.
<template>
<div>
<el-upload
ref="importExcelRef"
:action="VITE_APP_API_URL"
:limit="1"
:show-file-list="false"
class="uploadExcelContent"
:on-success="importSuccess"
>
<div title="Import excel">
<div class="importExcel"></div>
</div>
</el-upload>
</div>
</template>
<script setup>
import { ref } from 'vue'
const importExcelRef = ref(null)
const importSuccess = ()=>{
();
}
</script>Second, because there are multiple tables in the form that need to be imported into Excel as basic data for editing, and the number of tables is not fixed and is rendered based on the backend data. Therefore, when clearing the upload file, unknown multiple needs to be processed, so ref needs to be set dynamically.
<template>
<div>
<el-upload :ref="(el) => handleSetUploadRefMap(el, rowIndex,compIndex)">
<div title="Import excel" >
<div class="importExcel"></div>
</div>
</el-upload>
</div>
</template>
<script>
import { ref } from 'vue'
const uploadRefMap = ref({});
// Dynamically set up upload Refconst handleSetUploadRefMap = (el,rowIndex,compIndex) => {
if (el) {
[`Upload_Ref_${rowIndex}_${compIndex}`] = el
}
}
</script>Required implementation code
<template>
<div>
<!-- Uploadexcel -->
<el-upload
:ref="(el) => handleSetUploadRefMap(el)"
action=""
:http-request="httpExcelRequest"
:limit="1"
:show-file-list="false"
class="uploadExcelContent"
:data={}
>
<div title="Import excel" style="cursor: pointer;" >
<div>Importexcel</div>
</div>
</el-upload>
<!-- List -->
<div class="excel-content" v-for="(rowItem,rowIndex) in excelList" :key="rowIndex">
<div class="comp" v-for="(comp,compIndex) in rowItem" :key="compIndex">{{comp}}</div>
</div>
</div>
</template>
<script setup name="mainContent">
import * as xlsx from 'xlsx'
import {ElMessage} from 'element-plus'
import { ref } from 'vue'
const uploadRefMap = ref({});
const excelList = ref([])
// Dynamically set up upload Refconst handleSetUploadRefMap = (el) => {
if (el) {
[`Upload_Ref`] = el
}
}
// File upload customizationconst httpExcelRequest = async (op) => {
// Get parameters other than files, and specifically based on actual business needs ()
// Get the uploaded excel and parse the data let file =
let dataBinary = await readFile(file);
let workBook = (dataBinary, { type: "binary", cellDates: true })
let workSheet = [[0]]
const excelData = .sheet_to_json(workSheet,{ header: 1 })
= excelData
(excelData)
if([`Upload_Ref`]){
[`Upload_Ref`].clearFiles();
}
}
const readFile = (file) => {
return new Promise((resolve) => {
let reader = new FileReader()
(file)
= (ev) => {
resolve(?.result)
}
})
}
</script>
<style lang="scss" scoped>
.uploadExcelContent{
display: flex;
flex-direction: row;
}
.excel-content{
display: flex;
flex-direction: row;
align-items: center;
.comp{
width: 200px;
font-size: 12px;
}
}
</style>Due to different business needs, the detailed processing logic of table data is not displayed here. You can assign values according to your own data structure. After running the demo, you can directly view the obtained excel data on the console.
Summarize
This is the article about importing excel into vue3 and parsing excel data rendering into a table. For more related content related to importing excel analysis data rendering of vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!