Phản ứng xuất mã excel-excelandbox

Có một số điều kiện quyết định đầu tiên cho hướng dẫn này. Bạn cần tạo một dự án React với ứng dụng tạo-ứng dụng phản ứng 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

You have to add stylesheets from the library React Bootstrap in

  
    
    
    
    
    
    
    
    React App
  
  
    You need to enable JavaScript to run this app.
    
  

2

  
    
    
    
    
    
    
    
    React App
  
  
    You need to enable JavaScript to run this app.
    
  

Tạo tiêu đề cho Header

import React from 'react'

export const Header = [] => {
    return [
        
            React Export To Excel Example
        
    ]
}

Tạo bảng khách hàng

Please create a component table Khách hàng. Đây là một trình bày thành phần trong đó đưa ra các khách hàng 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[
              
                   {index + 1} 
                  {customer.firstName}
                  {customer.lastName}
                  {customer.email}
                  {customer.address}
                  {customer.zipcode}
              
          ]
      }

      const CustomerTable = customers.map[[cust,index] => CustomerRow[cust,index]]

      const tableHeader = 
                            
                                #
                                First Name
                                Last Name
                                Email
                                Address
                                Zipcode
                            
                        
    
    return [
        
            {tableHeader}
            
                {CustomerTable}
            
        
    ]
}

Truyền dữ liệu từ thành phần Ứng dụng

Chúng ta nên chuyển dữ liệu được hiển thị trong bảng từ thành phần Ứng dụng như bên dưới và chúng ta cũng cần nhập thành phần Khách hàng và Tiêu đề để sử dụng các dữ liệu trong chức năng kết xuất

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  {

    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 [
         exportToCSV[csvData,fileName]}>Export
    ]
}

Thành phần 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 đạo cụ. Phương thức exportToCSV được gọi khi nhấp vào nút xuất

You must enter this component in App component

// removed for brevity
render[] {

    return [
      
        
        
            
                Customers
            
            
                
            
        
        
      
    ];
  }

Màn hình sau đây là màn hình cuối cùng sau khi chúng tôi bổ sung tất cả các chức năng trên và sẵn sàng hoạt động.

4. Chức năng Xuất khẩu với phụ kiện NPM lib

  
    
    
    
    
    
    
    
    React App
  
  
    You need to enable JavaScript to run this app.
    
  

3 là thư viện bên thứ ba mà chúng ta có thể sử dụng. Tất cả công việc chúng ta cần làm là truyền dữ liệu và tên tệp và thư viện này sẽ mất phần còn lại cho chúng ta

Chúng ta cần cài đặt

  
    
    
    
    
    
    
    
    React App
  
  
    You need to enable JavaScript to run this app.
    
  

3 trước và sau đó nhập nó vào thành phần ExportCSV

npm install react-csv --save

Nhập CSVLink từ Reac-csv và chuyển dữ liệu cần thiết và đặt tên tệp vào liên kết đó như bên dưới

import React from 'react'
import { CSVLink } from 'react-csv'
import Button from 'react-bootstrap/Button';

export const ExportReactCSV = [{csvData, fileName}] => {
    return [
        
            Export
        
    ]
}

Trong thành phần Ứng dụng, tất cả những gì bạn cần làm là nhập vào

  
    
    
    
    
    
    
    
    React App
  
  
    You need to enable JavaScript to run this app.
    
  

5 thay vì

  
    
    
    
    
    
    
    
    React App
  
  
    You need to enable JavaScript to run this app.
    
  

6

// 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

05. Tóm tắt

• Chúng ta cần xlsx và libs của trình bảo vệ tệp để thực hiện chức năng xuất trong React
• Có một số cách bạn có thể phát triển logic export của mình trong React. một là sử dụng logic riêng, một cách khác là sử dụng bất kỳ lib bên thứ ba nào
• Thực hiện xuất logic với thành phần riêng biệt để có thể sử dụng lại và cũng có thể được nhập vào bất kỳ thành phần nào để sử dụng nó

6. Phần kết luận

Có một số lib bên thứ ba hoặc npm để sử dụng ngay. Nhưng đôi khi chúng ta phải tạo thành phần riêng cho chức năng xuất để có thể hoạt động linh hoạt hơn và các mục đích khác như lý do bảo mật. Cảm ơn các bạn đã theo dõi. Trong bài viết có tham khảo tại https. //Blog. bitrc. io/xuất-dữ-liệu-to-excel-with-Reac-6943d7775a92