Tiêu đề xlsx json_to_sheet

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

3. Thực hiện các chức năng xuất khẩu

Please create a component has name is ExportCSV which get data doing props and quan tâm đến phần còn lại của chức năng xuất khẩu. Đây là thành phần 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à trình tiết kiệm tệp

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

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

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

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

2 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

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

2 before and after that input it in component 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 (
        <Button variant="warning">
            <CSVLink data={csvData} filename={fileName}>Export</CSVLink>
        </Button>
    )
}

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

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

4 thay vì

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

5.

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

0

5. 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 khẩu để 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