Export dữ liệu ra excel trong ứng dụng React

hovanban · Th 10 26, 2023

Chúng ta thường xuất dữ liệu từ bảng sang bảng excel trong các ứng dụng web. Có hai cách để thực hiện chức năng export trong React: một là sử dụng bất kỳ thư viện bên thứ ba nào và cách khác là tạo component riêng của bạn. Trong bài đăng này, chúng ta sẽ xem cách triển khai chức năng export ra excel trong ứng dụng React theo cả hai cách.
Dưới đây là các chủ đề chúng ta sẽ trải qua trong bài viết này:

Example Project
Điều kiện tiên quyết
Thực hiện chức năng export
Chức năng Export với bên thứ ba hoắc NPM lib
Tóm lược
Kết luận

1. Example project
Đây là một ứng dụng đơn giản với dữ liệu bảng và nút xuất ở góc trên cùng bên phải. Khi bạn bấm vào nút, dữ liệu từ bảng sẽ được tải xuống trong một bảng excel.Bạn có thể nhập dự án từ đây và chạy trực tiếp.

// clone the project

git clone https://github.com/bbachi/react-exportexcel-example.git

// install and start the project

npm install

npm start

2. Điều kiện tiên quyết
Có một số điều kiện tiên quyết cho hướng dẫn này. Bạn cần tạo một dự án React với ứng dụng create-react-app và cần cài đặt các gói npm xslx, bootstrapand file-saver.

// generate react project

create-react-app react-exportexcel-example

// install bootstrap

npm install react-bootstrap bootstrap --save

// install xsls and file-saver

npm install xlsx file-saver --save

Tạo một tiêu đề cho Header

import React from 'react'

import React from 'react' export const Header = () => { return ( <div className="header"> <h1>React Export To Excel Example</h1> </div> ) }

Tạo bảng Customers
Hãy tạo ra một component bảng Customer. Đây là một component trình bày trong đó đưa mảng customers làm props và renders làm bảng.

import React from 'react'

import Table from 'react-bootstrap/Table';



export const Customers = ({customers}) => {



    const CustomerRow = (customer,index) => {



        return(

              <tr key = {index} className='even'>

                  <td> {index + 1} </td>

                  <td>{customer.firstName}</td>

                  <td>{customer.lastName}</td>

                  <td>{customer.email}</td>

                  <td>{customer.address}</td>

                  <td>{customer.zipcode}</td>

              </tr>

          )

      }



      const CustomerTable = customers.map((cust,index) => CustomerRow(cust,index))



      const tableHeader = <thead className='bgvi'>

                            <tr>

                                <th>#</th>

                                <th>First Name</th>

                                <th>Last Name</th>

                                <th>Email</th>

                                <th>Address</th>

                                <th>Zipcode</th>

                            </tr>

                        </thead>

   

    return (

        <Table striped bordered hover>

            {tableHeader}

            <tbody>

                {CustomerTable}

            </tbody>

        </Table>

    )

}

Truyền dữ liệu từ App component
Chúng ta nên chuyển dữ liệu được hiển thị trong bảng từ App component như bên dưới và chúng ta cũng cần nhập các component Customers và Header để sử dụng các dữ liệu trong chức năng render.

import React from 'react';

import './App.css';

import { Customers } from './Customers'

import { Header } from './Header'



class App extends React.Component {



  customers = () => {

    let custs = []

    for (let i = 0; i <= 25; i++) {

      custs.push({firstName: `first${i}`, lastName: `last${i}`,

      email: `abc${i}@gmail.com`, address: `000${i} street city, ST`, zipcode: `0000${i}`});

    }

    return custs;

  }

 

  render() {



    return (

      <div className="App">

        <Header />

        <Customers customers={this.customers()}/>

      </div>

    );

  }

}



export default App;

3. Thực hiện các chức năng Export
Hãy tạo ra một component có tên là ExportCSVwhich lấy dữ liệu làm props và quan tâm tới phần còn lại của chức năng export. Đây là component với phương thức exportToCSV để xử lý tất cả các chức năng tải xuống excel với xlxs và file-saver.

import React from 'react'

import Button from 'react-bootstrap/Button';

import * as FileSaver from 'file-saver';

import * as XLSX from 'xlsx';



export const ExportCSV = ({csvData, fileName}) => {



    const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';

    const fileExtension = '.xlsx';



    const exportToCSV = (csvData, fileName) => {

        const ws = XLSX.utils.json_to_sheet(csvData);

        const wb = { Sheets: { 'data': ws }, SheetNames: ['data'] };

        const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });

        const data = new Blob([excelBuffer], {type: fileType});

        FileSaver.saveAs(data, fileName + fileExtension);

    }



    return (

        <Button variant="warning" onClick={(e) => exportToCSV(csvData,fileName)}>Export</Button>

    )

}

Component này là một thành phần trình bày lấy dữ liệu để tải xuống và tên tệp làm props. Phương thức exportToCSV được gọi khi nhấp vào nút xuất. Bạn cần nhập component này trong App component.

// removed for brevity

render() {



    return (

      <div className="App">

        <Header />

        <div className="row">

            <div className="col-md-8">

                <h2>Customers</h2>

            </div>

            <div className="col-md-4 center">

                <ExportCSV csvData={this.state.customers} fileName={this.state.fileName} />

            </div>

        </div>

        <Customers customers={this.customers()}/>

      </div>

    );

  }

CÔNG TY TNHH TƯ VẤN TRUYỀN THÔNG MINARA
ĐỊA CHỈ:
- 182 Trần Bình Trọng, P.3, Q.5, Tp.HCM
- 27 Đường số 16, Trung Tâm Hành Chính Dĩ An, Bình Dương.
Điện thoại: 097.777.1060
Email: info@minara.vn
Website: www.minara.vn

Export dữ liệu ra excel trong ứng dụng React

hovanban

Well-known member