Xlsx sử dụng json_to_sheet

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ư thế nào để thêm tiêu đề và tùy chỉnh kiểu vào trang tính. ?. Vì vậy, hãy xem xét những bình luận này, trong bài đăng này, tôi đã quyết định đưa ra 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 để bổ sung các tùy chỉnh tiêu đề sẽ được hiển thị

First way

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

Run project at address

npm start

Nhập chế độ FullScreenen EXIT Mode FullScreen

Run project at address

Please go deep into next step

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 - 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
file-saver - thư viện lưu tệp ở phía máy khách
axios - promise based HTTP client for the browser and node.js. We will use it for fetching data from server

Please go deep into next step

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

Run project at address

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

Run project at address

Please go deep into next step

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

Run project at address

Please go deep into next step

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

Run project at address

  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

Please go deep into next step

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 bảng định dạng khác nhau - thư viện để lưu các tệp trên máy khách client hàng -sideaxios - hẹn hò máy khách HTTP dựa trên trình duyệt và nút. js. Chúng tôi sẽ sử dụng nó để tìm dữ liệu từ máy chủ