How to import Excel files with custom fields in Vue

With the continuous development of Internet technology, more and more companies need to manage and analyze massive amounts of data, and much of this data exists in the form of Excel. Web applications based on Vue usually need to import Excel files for data analysis and data application. Vue has many libraries that can import Excel files, but usually, the data format of Excel files does not necessarily meet the format we need, so we need to customize fields for the imported Excel data to adapt to our data integration and analysis. need. This article will introduce you how to import custom fields into Excel files in Vue.

1. Import of Excel files

In Vue applications, we usually use some third-party libraries to import Excel files. These tools include: ExcelJS, Xlsx, etc. This article uses ExcelJS as an example to introduce how to use Vue to import Excel files. First, you need to install the ExcelJS dependency package:

npm install exceljs --save

Then import ExcelJS in the Vue component:

import ExcelJS from 'exceljs';

After that, we need to use ExcelJS to load the Excel file. Here we use the JavaScript FileReader object to accomplish.

export default {
  name: 'ImportExcel',
  data() {
    return {};
  },
  methods: {
    handleImportExcel(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const result = e.target.result;
        const workbook = new ExcelJS.Workbook();
        workbook.xlsx.load(result).then((book) => {
          // 处理Workbook对象
        });
      };
      reader.readAsArrayBuffer(file);
    },
  },
};

In this example, we defined the handleImportExcel method to handle the reading of excel files, created a new FileReader object through new FileReader(), and read the Excel file as ArrayBuffer type (contents). This avoids file encoding format issues.

ExcelJS supports multiple file formats, including xlsx, xls, csv, ods, etc. Here we use the load() method to read the contents of the Excel file and return a Workbook object, which is the initial data for the custom columns we import into Excel.

2. Customized imported columns

After we successfully import the Excel file, before continuing to integrate the data, the data needs to be filtered and processed by custom columns. This process can be implemented using Vue's computed properties or filters to meet our data needs.

export default {
  name: 'ImportExcel',
  data() {
    return {};
  },
  methods: {
    handleImportExcel(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const result = e.target.result;
        const workbook = new ExcelJS.Workbook();
        workbook.xlsx.load(result).then((book) => {
          const worksheet = book.worksheets[0];
          const headers = [];
          worksheet.eachRow((row) => {
            if (row.number === 1) {
              row.eachCell((cell) => {
                headers.push(cell.value);
              });
            }
          });
          const data = [];
          worksheet.eachRow((row, rowNumber) => {
            if (rowNumber > 1) {
              const rowData = {};
              row.eachCell((cell, colNumber) => {
                const colName = headers[colNumber - 1];
                rowData[colName] = cell.value;
              });
              data.push(rowData);
            }
          });
          this.$emit('add-data', data);
        });
      };
      reader.readAsArrayBuffer(file);
    },
  },
};

In this example, we use the ExcelJS method to read the worksheet object in the Excel file. Then, we created a headers array, traversed the header of the Excel file through the eachRow() method in the worksheet object, and stored the value of each cell in the header into the headers array. Then, through the eachRow() and eachCell() methods, it traverses the rows and columns of Excel, corresponds the data of each cell in the row to the headers array, and stores the results in the rowData object. Finally, the rowData is stored in the data array, and finally the data is passed to the parent component through Vue's $emit() method.

3. Rendering of custom columns

After successfully importing the Excel file, we can freely filter and process the data with custom columns. In Vue, you can use computed properties or filters to implement custom processing of data.

<template>
  <table>
    <thead>
      <tr>
        <th>{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.age }}</td>
        <td>{{ row.gender }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "CustomFields",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    headers() {
      const firstRow = this.data[0];
      return Object.keys(firstRow);
    },
    filteredData() {
      return this.data.map((item) => {
        return {
          id: item.ID,
          name: item.Name,
          age: item.Age,
          gender: item.Gender === "M" ? "男" : "女",
        };
      });
    },
  },
};
</script>

In this example, we obtain the information of the data header passed in through the calculated attribute headers. In filteredData, we filter and process custom columns for each row of data, and perform secondary processing on the original fields such as ID, Name, Age, and Gender.

4. Summary

This article introduces how to import Excel files in VueWeb applications and how to process imported data with custom columns. We use the ExcelJS tool library to read the contents of Excel files, and use calculated properties or filters in Vue components to implement custom column processing for imported Excel. These technologies will allow us to process and use Excel file data more efficiently and flexibly.

The above is the detailed content of How to import Excel files with custom fields in Vue. For more information, please follow other related articles on the PHP Chinese website!