Hướng dẫn reactjs read excel file - Reacjs đọc tệp excel

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.

Nội dung chính ShowShow

• 1. Example project
• 2. Điều kiện tiên quyết
• Tạo một tiêu đề cho Header
• Tạo bảng Customers
• Truyền dữ liệu từ App component
• 3. Thực hiện các chức năng Export
• 4. Chức năng Export với bên thứ ba hoắc NPM lib
• 5. Tóm lược
• 6. Phần kết luận

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

2. Điều kiện tiên quyết

3. Thực hiện các chức năng Export

4. Chức năng Export với bên thứ ba hoắc NPM lib

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

5. Tóm lược

6. Phần kết luận

// removed for brevity
render[] {

    return [
      
        
        
            
                Customers
            
            
                
            
        
        
      
    ];
  }

Dưới đây là các chủ đề chúng ta sẽ trải qua trong bài viết này:

4. Chức năng Export với bên thứ ba hoắc NPM lib

5. Tóm lược

6. Phần kết luận

npm install react-csv --save

Dưới đây là các chủ đề chúng ta sẽ trải qua trong bài viết này:

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

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

Example Project

import { ExportReactCSV } from './ExportReactCSV'
  
    // removed code for the brevity

    
        
    
      
  }
}

export default App;

5. Tóm lược

• 6. Phần kết luận
• Dưới đây là các chủ đề chúng ta sẽ trải qua trong bài viết này:
• Example Project

6. Phần kết luận

Dưới đây là các chủ đề chúng ta sẽ trải qua trong bài viết này: