如何用Ag-grid实现JSON导出Excel并隐藏表格仅保留下载链接

Hey there! I've got you covered with a straightforward approach to use AG-Grid for exporting your JSON data to Excel/CSV without showing the grid itself—just a clean set of download links. Here's how to pull it off:

Step 1: Set Up the Hidden Grid #

First, add the AG-Grid container to your markup but hide it completely with CSS. This ensures the grid initializes properly (and can access your data) without taking up space or being visible to users.

Step 2: Initialize AG-Grid with Your Data & Columns #

Configure the grid with your existing column definitions and JSON row data. You don't need any extra UI-focused settings since the grid is hidden.

Step 3: Add Download Links to Trigger Exports #

Create simple links that call AG-Grid's built-in export methods when clicked.

Example Code (Vanilla JavaScript) #

<!-- Hidden AG-Grid container -->
<div id="hiddenGrid" style="display: none;"></div>

<!-- Download links -->
<div>
  <a href="#" id="downloadExcel">Download Excel (XLSX)</a>
  <a href="#" id="downloadCsv" style="margin-left: 1rem;">Download CSV</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
<script>
// Your existing column definitions
const columnDefs = [
  {headerName: "Athlete", field: "athlete", width: 150},
  {headerName: "Age", field: "age", width: 90},
  {headerName: "Country", field: "country", width: 120},
  {headerName: "Year", field: "year", width: 90},
  {headerName: "Date", field: "date", width: 110},
  {headerName: "Sport", field: "sport"}
];

// Replace this with your actual JSON data
const rowData = [
  {athlete: "Michael Phelps", age: 23, country: "United States", year: 2008, date: "2008-08-10", sport: "Swimming"},
  {athlete: "Usain Bolt", age: 22, country: "Jamaica", year: 2008, date: "2008-08-16", sport: "Athletics"},
  // Add more rows as needed
];

// Grid configuration
const gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  // No need for UI-specific settings here
};

// Initialize the grid once the DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  const gridDiv = document.getElementById('hiddenGrid');
  new agGrid.Grid(gridDiv, gridOptions);
});

// Bind export actions to the links
document.getElementById('downloadExcel').addEventListener('click', (e) => {
  e.preventDefault();
  // Export to Excel (requires AG-Grid Enterprise)
  gridOptions.api.exportDataAsExcel({
    fileName: 'athlete-data.xlsx',
    // Optional: Customize export (e.g., include/exclude columns, add headers)
  });
});

document.getElementById('downloadCsv').addEventListener('click', (e) => {
  e.preventDefault();
  // Export to CSV (works with AG-Grid Community)
  gridOptions.api.exportDataAsCsv({
    fileName: 'athlete-data.csv',
  });
});
</script>

Key Notes: #

• Excel Export Requirement: Exporting to XLSX requires AG-Grid Enterprise. If you're using the free Community edition, you can either export as CSV (which opens perfectly in Excel) or use a third-party library to convert CSV to XLSX post-export.
• Async Data: If your JSON data is fetched asynchronously, call gridOptions.api.setRowData(yourFetchedData) once the data is available to ensure the grid has the latest data for export.
• Framework Adaptation: If you're using Vue/React/Angular, the logic stays the same—just adapt the grid initialization to your framework's syntax (e.g., using ag-grid-vue or ag-grid-react components, hiding them with CSS, and binding export methods to your download buttons).

内容的提问来源于stack exchange，提问作者RV.