> Java > java지도 시간 > 본문

ElementUI+Springboot를 사용하여 Excel 기능을 내보내는 방법

WBOY
풀어 주다: 2023-05-18 19:19:20
앞으로
882명이 탐색했습니다.

Steps

종속성 패키지

먼저 vue의 종속성 패키지를 소개해야 합니다
저는 이것을 사용합니다

npm install xlsx@^0.16.0
npm install file-saver@^2.0.2
로그인 후 복사

xlsx 종속성의 역할은 데이터를 Excel 통합 문서로 처리하는 것입니다xlsx依赖的作用为:将数据进行处理为excel工作簿
file-saver依赖的作用为:将文件进行一个保存导出来

element表格table

这里,实际上是用的elemenetUI的表格table标签,获取到数据,因此,我们需要对表格添加一个选择器
在我的项目中,我是添加了一个idexportExcel< code>file-saver 종속성의 기능은 file

element table

을 저장하고 내보내는 것입니다. 여기서 elementenetUI의 테이블 태그는 실제로 데이터를 얻는 데 사용됩니다. 따라서 선택기를 추가해야 합니다. 내 프로젝트에 id를 추가했습니다: exportExcel

<el-table :data="tableData" id="exportExcel" border ></el-table>
로그인 후 복사

tableData는 백엔드 변수에서 데이터를 수신하는 사용자 정의 방법입니다

패키지 소개

그런 다음 내보내기 기능을 작성해야 하는 페이지에서 가져옵니다

자세한 내용은 다음과 같습니다.

import XLSX from "xlsx";
import FileSaver from "file-saver";
로그인 후 복사

작성 방법

다음 코드 중 하나가 있습니다

var xlxsParam = { raw: true };
로그인 후 복사

이 기능은 data

주로 날짜 등의 데이터가 처리되어 표시 오류가 발생하는 것을 방지하는 것이 목적입니다

    // 导出
    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;
    },
로그인 후 복사

전체 예시

전체 예시는 다음과 같습니다.

<!--页面-->
<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>
로그인 후 복사

최종 내보내기 결과ElementUI+Springboot를 사용하여 Excel 기능을 내보내는 방법

내 프로젝트에서 다음을 수행해야 합니다. 초보자 훈련 기록에 대한 쿼리 및 가져오기 기능이 있으므로 최종 인터페이스 스타일은 다음과 같습니다

ElementUI+Springboot를 사용하여 Excel 기능을 내보내는 방법

실제 내보낸 결과는 다음과 같습니다.

ElementUI+Springboot를 사용하여 Excel 기능을 내보내는 방법

개인정보 보호를 위해 이름 데이터를 삭제했습니다🎜🎜🎜🎜

위 내용은 ElementUI+Springboot를 사용하여 Excel 기능을 내보내는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:yisu.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿