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