Shulou(Shulou.com)06/01 Report--

This article mainly explains the "Vue how to import Excel function", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "Vue how to import Excel function" bar!

1. Front-end leading implementation steps

The first step is to click the Import button on the page to read the Excel file

Use plug-ins to complete.

The second step is to process the data format according to the requirements of the back end and convert it to the format they need.

You need to write your own logic.

The third step is to send the data back through ajax through the back-end interface.

Adjust the interface, routine operation.

In short: the front end reads excel files, modifies the file format, and adjusts the interface

two。 Realize reading into Excel file

Note: the front-end import function can be realized by this step. If you are interested in changing the format, you can move on to step 3.

Summary: copy the code to your own folder and download the necessary plug-ins.

2.1Use the upload method in vue-admin-element provided by elementUI (Baidu Warehouse Clone is also available on the official website)

2.2 download package npm install xlsx-S (step 2.1 has been completed by default)

2.3 introduce the UploadExcel component and register it as global (find the UploadExcel file, copy it, not to mention the encapsulation component)

Global components will not be registered. Refer to the following code: (you can do it in main.js if you like. Here, I'll do it as maintainable.)

Import PageTools from ". / PageTools" import UploadExcel from ". / UploadExcel" export default {/ / the initialization of the plug-in and the global function provided to you by the plug-in, you can configure install (Vue) {/ / to globally register the component Vue.component ("PageTools", PageTools) / / register the toolbar component Vue.component ("UploadExcel", UploadExcel) / / register to import the excel component}}

2.4 introduce components, use components, configure routing, set click callback function (needless to say)

2.5 Test effect

The browser manually enters the routing address you set, and the page jumps to it.

Summary: 1. The most important thing is to copy and then download the necessary plug-ins

two。 It is necessary to introduce UploadExcel components (to import Excel files), but it is not necessary to register globally, depending on the mood.

3. Import the component, register the callback function for him, the two parameters inside him are necessary, you can refer to other people's source code, it is easier to understand

Essence of 4.excel import plug-in: convert excel into regular data that js can recognize after analysis, and we can do anything to get the data.

3. Process the data

Note: this step is actually a test of the use of JavaScript, but this is not difficult for me, and I believe it will be a long time later.

3.1 format required by the backend:

3.2 what we have to deal with:

The field is converted from Chinese to English. What is read in excel is the name, and what is needed at the back end is username.

Date processing. The time read from the excel is a number value, while the back end requires a standard date.

3.3 encapsulate a separate processing function:

/ * contents of results excel form / / [{"name": "Xiao Zhang", "Mobile number": "13712345678"}, {.}] / Target / / [{"username": "Xiao Zhang" "mobile": "13712345678"}, {.}] * / transExcel (results) {const userRelations = {"entry date": "timeOfEntry", "Mobile number": "mobile", "name": "username", "date of becoming a regular employee": "correctionTime", "Job number": "workNumber", "Department": "departmentName" "form of employment": "formOfEmployment"} return results.map (item = > {const obj = {} / / 1. Take out all the attribute names of this object: ["name", "mobile phone number"] / / 2. Traverse the array, go to userRelations to find the corresponding English name through the Chinese name, and save the value const zhKeys = Object.keys (item) zhKeys.forEach (zhKey = > {const enKey = userRelations [zhKey] / / if it is a time format) You need to convert if (enKey = = "correctionTime" | | enKey = = "timeOfEntry") {obj [enKey] = new Date (formatExcelDate (item.zhKey))} else {obj [enKey] = item [zhKey]}) return obj})} handleSuccess ({results, header}) {console.log ("read from the current excel file is" Results) / / results: [{entry date: 44502, name: xxxx}] / / Target: / / results: [{timeOfEntry: 44502, username:xxxx}] / / process the format const arr = this.transExcel (results) console.log read from excel ("converted format is", arr)})

3.4 date processing function:

/ / convert the date format content in the excel file back to standard time / / https://blog.csdn.net/qq_15054679/article/details/107712966export function formatExcelDate (numb Format = "/") {const time = new Date ((numb-25567) * 24 * 3600000-5 * 60 * 1000-43 * 1000-24 * 3600000-8 * 3600000) time.setYear (time.getFullYear ()) const year = time.getFullYear () + "const month = time.getMonth () + 1 +" const date = time.getDate () + "if (format & & format.length = = 1) {return year + format + month + format + date } return year + (month < 10? "0" + month: month) + (date < 10? "0" + date: date)} 4. Adjust the interface and send a request Use import {importEmployee} from "@ / api/employees" export default {name: "Import", methods: {async handleSuccess ({results, header}) {try {console.log ("read from the current excel file is", results) / / results: [{entry date: 44502, name: xxxx}] / / Target: / / results: [{timeOfEntry: 44502 Username:xxxx}] const arr = this.transExcel (results) console.log ("format after conversion", arr) / / call the upload API Const rs = await importEmployee (arr) console.log ("call upload API", rs) / / after uploading successfully, go back to the previous page this.$router.back () this.$message.success ("Operation succeeded")} catch (err) {this.$message.error (err.message)} Thank you for reading The above is the content of "how to import Vue into Excel". After the study of this article, I believe you have a deeper understanding of how to import Excel into Vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.