Table of Contents
Steps
Dependency package
element table
Introduce the package
Writing method
Complete example
Final export result
Home Java javaTutorial How to use elementUI+Springboot to implement the excel export function

How to use elementUI+Springboot to implement the excel export function

May 18, 2023 pm 07:19 PM
excel elementui springboot

Steps

Dependency package

First, we need to introduce the vue dependency package
I use this

npm install xlsx@^0.16.0
npm install file-saver@^2.0.2
Copy after login

Among themxlsx The function of the dependency is: to process the data into an excel workbook
file-saverThe function of the dependency is: to save and export the file

element table

Here, the table tag of elemenetUI is actually used to obtain the data. Therefore, we need to add a selector to the table.
In my project, I added an idexportExcel

<el-table :data="tableData" id="exportExcel" border ></el-table>
Copy after login

tableData is a custom variable that receives data from the backend

Introduce the package

Then, when you need to write the export The function page is introduced
The details are as follows:

import XLSX from "xlsx";
import FileSaver from "file-saver";
Copy after login

Writing method

In the following code, there is a

var xlxsParam = { raw: true };
Copy after login

The function of this is not to process the data
The main purpose is to prevent data such as dates from being processed, resulting in display errors

    // 导出
    exportExcelData() {
      var xlxsParam = { raw: true };
      // 从表中生成工作簿
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#exportExcel"),
        xlxsParam
      );
      // 获取二进制字符串作为输出
      var wbOut = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          // Blob 对象表示一个不可变、原始数据的类文件对象
          // Blob 表示的不一定是js的原生格式数据
          // File 接口基于Blob,
          // 返回一个新创建的Blob对象,其内容由参数中给定的数组串联
          new Blob([wbOut], { type: "application/octet-stream" }),
          // 导出文件名称
          "文件名称.xlsx"
        );
      } catch (e) {
      // 捕捉报错
        if (typeof console != "undefined") {
          console.log(e, wbOut);
        }
      }
      // 将结果返回出来,导出文件
      return wbOut;
    },
Copy after login

Complete example

The complete example is as follows:

<!--页面-->
<template>
  <div>
  <!--导出按钮-->
  <el-button type="primary" @click="exportExcelData()">导出</el-button>
  <!--table数据-->
      <el-table :data="tableData" id="exportExcel" border >
      <el-table-column
        label="字段1"
        type="字段名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="字段2"
        label="字段名称"
        align="center"
      ></el-table-column>
    </el-table>
  </div>
<template>
<!--逻辑-->
<script>
// 引入依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  name: "newStaffRecord",
  data() {
    return {
      tableData: [], // 接收的后端数据变量
    };
  },
  methods: {
	    // 导出
    exportExcelData() {
      var xlxsParam = { raw: true };
      // 从表中生成工作簿
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#exportExcel"),
        xlxsParam
      );
      // 获取二进制字符串作为输出
      var wbOut = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          // Blob 对象表示一个不可变、原始数据的类文件对象
          // Blob 表示的不一定是js的原生格式数据
          // File 接口基于Blob,
          // 返回一个新创建的Blob对象,其内容由参数中给定的数组串联
          new Blob([wbOut], { type: "application/octet-stream" }),
          // 导出文件名称
          "新人培训记录.xlsx"
        );
      } catch (e) {
        if (typeof console != "undefined") {
          console.log(e, wbOut);
        }
      }
      return wbOut;
    },
	}
}
</script>
Copy after login

Final export result

In my project, I need to implement a query and import function for newbie training records, so the final interface style is like this

How to use elementUI+Springboot to implement the excel export function

The actual exported result is:

How to use elementUI+Springboot to implement the excel export function

To maintain privacy, I have removed the name data

How to use elementUI+Springboot to implement the excel export function

The above is the detailed content of How to use elementUI+Springboot to implement the excel export function. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to filter more than 3 keywords at the same time in excel How to filter more than 3 keywords at the same time in excel Mar 21, 2024 pm 03:16 PM

How to filter more than 3 keywords at the same time in excel

What should I do if the frame line disappears when printing in Excel? What should I do if the frame line disappears when printing in Excel? Mar 21, 2024 am 09:50 AM

What should I do if the frame line disappears when printing in Excel?

How to type subscript in excel How to type subscript in excel Mar 20, 2024 am 11:31 AM

How to type subscript in excel

How to change excel table compatibility mode to normal mode How to change excel table compatibility mode to normal mode Mar 20, 2024 pm 08:01 PM

How to change excel table compatibility mode to normal mode

How to set superscript in excel How to set superscript in excel Mar 20, 2024 pm 04:30 PM

How to set superscript in excel

Where to set excel reading mode Where to set excel reading mode Mar 21, 2024 am 08:40 AM

Where to set excel reading mode

How to use the iif function in excel How to use the iif function in excel Mar 20, 2024 pm 06:10 PM

How to use the iif function in excel

How to read excel data in html How to read excel data in html Mar 27, 2024 pm 05:11 PM

How to read excel data in html

See all articles