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 [
exportToCSV[apiData, fileName]}>Export
];
};
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['//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 [
];
}
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ủ