#json #reactjs #excel #react-hooks #export-to-excel
Вопрос:
У меня есть таблица, в которой отображается список продуктов. В строке есть два раскрывающихся списка для выбора единицы измерения (UOM) и страны. Эти раскрывающиеся списки должны быть сохранены после загрузки (экспорта в excel) в файле excel. Используя «react-экспорт-excel» для загрузки. Есть ли способ сделать это? Я не показал код для таблицы, потому что код становился слишком длинным/
import React, { useState, Fragment } from "react";
import { useHistory } from "react-router-dom";
import ReactExport from "react-export-excel";
const ExcelFile = ReactExport.ExcelFile;
const ExcelSheet = ReactExport.ExcelFile.ExcelSheet;
const ExcelColumn = ReactExport.ExcelFile.ExcelColumn;
const VendorProductCatalog = (props) => {
const [catalogItems, setCatalogItems] = useState([]);
const [uomList, setUomList] = useState([]);
const history = useHistory();
React.useEffect(() => {
getCatalogItem();
}, []);
const getCatalogItem = () => {
setUomList([
{
"id": 1,
"name": "EACH"
},
{
"id": 3,
"name": "LOT"
},
{
"id": 4,
"name": "MTR"
},
{
"id": 6,
"name": "SET"
}
]);
setCatalogItems([
{
"id": 27,
"product_name": "Cup",
"description": "This is a product.",
"country": "India",
"hs_code": 12,
"uom_id": 1,
"unit_price": 25
},
{
"id": 29,
"product_name": "Plate",
"description": "Intensions",
"country": "India",
"hs_code": 56,
"uom_id": 3,
"unit_price": 20
},
{
"id": 30,
"product_name": "Plate",
"description": "Intensions",
"country": "India",
"hs_code": 56,
"uom_id": 3,
"unit_price": 20
}
]);
};
return (
<div>
<div>
</div>
<ExcelFile element={<button>Download Data With Styles</button>}>
<ExcelSheet data={catalogItems} name="Sheet1">
<ExcelColumn label="Item Name" value="product_name"/>
<ExcelColumn label="Description" value="description"/>
<ExcelColumn label="Country of Manufacturing" value="country"/>
<ExcelColumn label="HS Code" value="hs_code"/>
<ExcelColumn label="UOM" value="uom_id"/>
<ExcelColumn label="Unit Price" value="unit_price"/>
</ExcelSheet>
</ExcelFile>
</div>
);
};
export default VendorProductCatalog;