Efficient interaction between Vue and Excel: how to achieve batch filling and import of data

Efficient interaction between Vue and Excel: How to implement batch filling and importing of data

In most projects, batch filling and importing of data is a common requirement. As a popular data processing tool, Excel, combined with the Vue framework, can achieve efficient data interaction. This article will introduce how to batch fill and import data through Vue and some commonly used plug-ins, and provide code examples.

1. Use the vue-xlsx plug-in to read and write Excel files
   vue-xlsx is a Vue component based on the js-xlsx plug-in, which allows us to directly read and write Excel files through Vue . We can use the following command to install vue-xlsx:

npm install vue-xlsx -S

Then, introduce vue-xlsx in the main.js file of the Vue project:

import VueXlsx from 'vue-xlsx'
Vue.use(VueXlsx)

2. to achieve data batching Fill function
   Assume we have an Excel file containing student names and grades, we can achieve batch filling of data through the following code:

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <table>
      <thead>
        <tr>
          <th>学生姓名</th>
          <th>成绩</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student, index) in students" :key="index">
          <td>{{ student.name }}</td>
          <td>{{ student.score }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: []
    }
  },
  methods: {
    handleFileUpload(event) {
      this.students = []
      const file = event.target.files[0]
      const reader = new FileReader()

      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result)
        const workbook = this.$xlsx.read(data, { type: 'array' })
        const sheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[sheetName]
        const jsonData = this.$xlsx.utils.sheet_to_json(worksheet, { header: 1 })

        jsonData.forEach((row, index) => {
          if (index !== 0) {
            const student = { name: row[0], score: row[1] }
            this.students.push(student)
          }
        })
      }

      reader.readAsArrayBuffer(file)
    }
  }
}
</script>

In the above code, we first add in the template An input tag for file upload and listens for the change event. When the user selects the Excel file, the file will be read and the handleFileUpload method will be triggered.

In the method, first clear this.students, and then use FileReader to read the file content. After the reading is completed, use the this.$xlsx object of vue-xlsx to parse the file content, and convert the data in Excel to JSON format through the this.$xlsx.utils.sheet_to_json method.

Finally, we convert the JSON data line by line into student objects and add them to this.students array. Use the v-for instruction in the template to traverse the array and display student names and grades.

3. Implement the data import function
   In addition to batch filling, we can also implement the data import function to import data in Excel into a form or database in Vue. The following is a simple example:

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <form>
      <div>
        <label>学生姓名：</label>
        <input v-model="student.name" />
      </div>
      <div>
        <label>成绩：</label>
        <input v-model="student.score" />
      </div>
      <button @click="importData">导入数据</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: {}
    }
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0]
      const reader = new FileReader()

      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result)
        const workbook = this.$xlsx.read(data, { type: 'array' })
        const sheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[sheetName]
        const jsonData = this.$xlsx.utils.sheet_to_json(worksheet, { header: 1 })

        if (jsonData.length > 0) {
          const row = jsonData[1]
          this.student = { name: row[0], score: row[1] }
        }
      }

      reader.readAsArrayBuffer(file)
    },
    importData() {
      // 将this.student中的数据导入表单或数据库
    }
  }
}
</script>

In the above code, we use a form to display the data to be imported. The form contains input boxes for student names and grades. When the user selects the Excel file, the file content is parsed in the same way, and the first row of data is used as the imported data.

Users can modify the data in the input box, then click the "Import Data" button and execute the importData method to import the data in this.student into the form or database.

Through the above code examples, we can see the efficient interaction between Vue and Excel. Whether it is batch filling or data import, using Vue and vue-xlsx plug-in can simplify the development process and improve work efficiency.

Summary
This article introduces how to implement batch filling and import of data through Vue and vue-xlsx plug-in. By correctly installing and using the vue-xlsx plug-in, we can easily read and write Excel files and use it with the Vue framework. Whether it is for data management or data import needs, such efficient interaction can greatly improve development efficiency.

The above is the detailed content of Efficient interaction between Vue and Excel: how to achieve batch filling and import of data. For more information, please follow other related articles on the PHP Chinese website!