Hướng dẫn react excel to pdf - phản ứng excel với pdf

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 (
        <Button variant="warning" onClick={(e) => exportToCSV(csvData,fileName)}>Export</Button>
    )
}

5. Tóm lược

6. Phần kết luận

// 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>
    );
  }

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 (
        <Button variant="warning">
            <CSVLink data={csvData} filename={fileName}>Export</CSVLink>
        </Button>
    )
}

Example Project

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

    <div className="col-md-4 center">
        <ExportReactCSV csvData={this.state.customers} fileName={this.state.fileName} />
    </div>
      
  }
}

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: