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 AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

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)

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

If when opening a file that needs to be printed, we will find that the table frame line has disappeared for some reason in the print preview. When encountering such a situation, we must deal with it in time. If this also appears in your print file If you have questions like this, then join the editor to learn the following course: What should I do if the frame line disappears when printing a table in Excel? 1. Open a file that needs to be printed, as shown in the figure below. 2. Select all required content areas, as shown in the figure below. 3. Right-click the mouse and select the &quot;Format Cells&quot; option, as shown in the figure below. 4. Click the “Border” option at the top of the window, as shown in the figure below. 5. Select the thin solid line pattern in the line style on the left, as shown in the figure below. 6. Select &quot;Outer Border&quot;

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

Excel is often used to process data in daily office work, and it is often necessary to use the &quot;filter&quot; function. When we choose to perform &quot;filtering&quot; in Excel, we can only filter up to two conditions for the same column. So, do you know how to filter more than 3 keywords at the same time in Excel? Next, let me demonstrate it to you. The first method is to gradually add the conditions to the filter. If you want to filter out three qualifying details at the same time, you first need to filter out one of them step by step. At the beginning, you can first filter out employees with the surname &quot;Wang&quot; based on the conditions. Then click [OK], and then check [Add current selection to filter] in the filter results. The steps are as follows. Similarly, perform filtering separately again

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

In our daily work and study, we copy Excel files from others, open them to add content or re-edit them, and then save them. Sometimes a compatibility check dialog box will appear, which is very troublesome. I don’t know Excel software. , can it be changed to normal mode? So below, the editor will bring you detailed steps to solve this problem, let us learn together. Finally, be sure to remember to save it. 1. Open a worksheet and display an additional compatibility mode in the name of the worksheet, as shown in the figure. 2. In this worksheet, after modifying the content and saving it, the dialog box of the compatibility checker always pops up. It is very troublesome to see this page, as shown in the figure. 3. Click the Office button, click Save As, and then

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

eWe often use Excel to make some data tables and the like. Sometimes when entering parameter values, we need to superscript or subscript a certain number. For example, mathematical formulas are often used. So how do you type the subscript in Excel? ?Let’s take a look at the detailed steps: 1. Superscript method: 1. First, enter a3 (3 is superscript) in Excel. 2. Select the number &quot;3&quot;, right-click and select &quot;Format Cells&quot;. 3. Click &quot;Superscript&quot; and then &quot;OK&quot;. 4. Look, the effect is like this. 2. Subscript method: 1. Similar to the superscript setting method, enter &quot;ln310&quot; (3 is the subscript) in the cell, select the number &quot;3&quot;, right-click and select &quot;Format Cells&quot;. 2. Check &quot;Subscript&quot; and click &quot;OK&quot;

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

When processing data, sometimes we encounter data that contains various symbols such as multiples, temperatures, etc. Do you know how to set superscripts in Excel? When we use Excel to process data, if we do not set superscripts, it will make it more troublesome to enter a lot of our data. Today, the editor will bring you the specific setting method of excel superscript. 1. First, let us open the Microsoft Office Excel document on the desktop and select the text that needs to be modified into superscript, as shown in the figure. 2. Then, right-click and select the &quot;Format Cells&quot; option in the menu that appears after clicking, as shown in the figure. 3. Next, in the “Format Cells” dialog box that pops up automatically

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

Most users use Excel to process table data. In fact, Excel also has a VBA program. Apart from experts, not many users have used this function. The iif function is often used when writing in VBA. It is actually the same as if The functions of the functions are similar. Let me introduce to you the usage of the iif function. There are iif functions in SQL statements and VBA code in Excel. The iif function is similar to the IF function in the excel worksheet. It performs true and false value judgment and returns different results based on the logically calculated true and false values. IF function usage is (condition, yes, no). IF statement and IIF function in VBA. The former IF statement is a control statement that can execute different statements according to conditions. The latter

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

In the study of software, we are accustomed to using excel, not only because it is convenient, but also because it can meet a variety of formats needed in actual work, and excel is very flexible to use, and there is a mode that is convenient for reading. Today I brought For everyone: where to set the excel reading mode. 1. Turn on the computer, then open the Excel application and find the target data. 2. There are two ways to set the reading mode in Excel. The first one: In Excel, there are a large number of convenient processing methods distributed in the Excel layout. In the lower right corner of Excel, there is a shortcut to set the reading mode. Find the pattern of the cross mark and click it to enter the reading mode. There is a small three-dimensional mark on the right side of the cross mark.

How to insert excel icons into PPT slides How to insert excel icons into PPT slides Mar 26, 2024 pm 05:40 PM

1. Open the PPT and turn the page to the page where you need to insert the excel icon. Click the Insert tab. 2. Click [Object]. 3. The following dialog box will pop up. 4. Click [Create from file] and click [Browse]. 5. Select the excel table to be inserted. 6. Click OK and the following page will pop up. 7. Check [Show as icon]. 8. Click OK.

See all articles