Hướng dẫn how do you export data to excel in react js? - làm cách nào để xuất dữ liệu sang excel trong phản ứng js?

Hướng dẫn how do you export data to excel in react js? - làm cách nào để xuất dữ liệu sang excel trong phản ứng js?

Hướng dẫn how do you export data to excel in react js? - làm cách nào để xuất dữ liệu sang excel trong phản ứng js?

Trong bài viết trước của tôi, về việc xuất dữ liệu sang Excel từ API bằng React, đã có những nhận xét như làm thế nào để thêm tiêu đề và kiểu tùy chỉnh vào trang tính!?. Vì vậy, xem xét những bình luận này, trong bài đăng này, tôi đã quyết định hiển thị giải pháp cho vấn đề đầu tiên là thêm các tiêu đề tùy chỉnh vào bảng Excel của bạn.

Trong bài đăng này, hai cách để thêm các tiêu đề tùy chỉnh sẽ được hiển thị

Cách đầu tiên

Thành lập

Tạo một dự án mới

npx create-react-app react-data-to-excel

Nhập chế độ FullScreenen EXIT Mode FullScreen

Chạy dự án tại địa phương

npm start

Nhập chế độ FullScreenen EXIT Mode FullScreen

Hướng dẫn how do you export data to excel in react js? - làm cách nào để xuất dữ liệu sang excel trong phản ứng js?

Chạy dự án tại địa phương

Hãy đi sâu vào bước tiếp theo.

Cài đặt thư viện

npm install xlsx file-saver axios

Nhập chế độ FullScreenen EXIT Mode FullScreen

Chạy dự án tại địa phương - library for parsing and writing various spreadsheet formats
file-saver - library for saving files on the client-side
axios - promise based HTTP client for the browser and node.js. We will use it for fetching data from server

Hãy đi sâu vào bước tiếp theo.

Cài đặt thư viện

import React from 'react'
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";

export const ExportToExcel = ({ apiData, fileName }) => {
  const fileType =
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
  const fileExtension = ".xlsx";

  const exportToCSV = (apiData, fileName) => {
    const ws = XLSX.utils.json_to_sheet(apiData);
    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 onClick={(e) => exportToCSV(apiData, fileName)}>Export</button>
  );
};

Nhập chế độ FullScreenen EXIT Mode FullScreen

Chạy dự án tại địa phương

import React from 'react'
import axios from 'axios'
import './App.css';

import {ExportToExcel} from './ExportToExcel'

function App() {
  const [data, setData] = React.useState([])
  const fileName = "myfile"; // here enter filename for your excel file

  React.useEffect(() => {
    const fetchData = () =>{
     axios.get('https://jsonplaceholder.typicode.com/posts').then(postData => {

     // reshaping the array
     const customHeadings = postData.data.map(item=>({
       "Article Id": item.id,
       "Article Title": item.title
     }))

      setData(customHeadings) 
     })
    }
    fetchData()
  }, [])

  return (
    <div className="App">
      <ExportToExcel apiData={data} fileName={fileName} />
    </div>
  );
}

export default App;

Nhập chế độ FullScreenen EXIT Mode FullScreen

Chạy dự án tại địa phương

Hãy đi sâu vào bước tiếp theo.

Cài đặt thư viện

Đối với dự án này, chúng tôi cần cài đặt các thư viện sau:

npm start

Nhập chế độ FullScreenen EXIT Mode FullScreen

Hướng dẫn how do you export data to excel in react js? - làm cách nào để xuất dữ liệu sang excel trong phản ứng js?

Chạy dự án tại địa phương

Hướng dẫn how do you export data to excel in react js? - làm cách nào để xuất dữ liệu sang excel trong phản ứng js?

Hãy đi sâu vào bước tiếp theo.

Hướng dẫn how do you export data to excel in react js? - làm cách nào để xuất dữ liệu sang excel trong phản ứng js?

Cài đặt thư viện

Đối với dự án này, chúng tôi cần cài đặt các thư viện sau:

 XLSX.utils.sheet_add_aoa(ws, [["Name", "Birthday", "Age", "City"]], { origin: "A1" });

Nhập chế độ FullScreenen EXIT Mode FullScreen

Chạy dự án tại địa phương

  const exportToCSV = (apiData, fileName) => {
    const ws = XLSX.utils.json_to_sheet(apiData);
    /* custom headers */
    XLSX.utils.sheet_add_aoa(ws, [["Name", "Birthday", "Age", "City"]], { origin: "A1" });
    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);
  };

Nhập chế độ FullScreenen EXIT Mode FullScreen

Hãy đi sâu vào bước tiếp theo.

Hướng dẫn how do you export data to excel in react js? - làm cách nào để xuất dữ liệu sang excel trong phản ứng js?

Cài đặt thư viện

Đối với dự án này, chúng tôi cần cài đặt các thư viện sau:

XLSX - Thư viện để phân tích cú pháp và viết các định dạng bảng tính khác nhau - thư viện để lưu các tệp trên máy khách khách hàng -sideaxios - hứa hẹn máy khách HTTP dựa trên trình duyệt và node.js. Chúng tôi sẽ sử dụng nó để tìm nạp dữ liệu từ máy chủ