Data Export

Export your data to Excel and PDF formats.

Nuxt Auto CRUD provides built-in support for exporting table data to Excel and PDF.

Features

  • Excel Export: Generates a .xlsx file using the xlsx library.
  • PDF Export: Generates a professional PDF document using jspdf and jspdf-autotable.
  • Dynamic Columns: Only exports columns visible in the UI.
  • Resolved Values: Exports human-readable values for relations (e.g., name instead of ID).

Usage

In any Auto CRUD table, click the Export button to see the available formats:

  1. Excel: Best for data analysis and importing into other tools.
  2. PDF: Best for reporting and sharing. The PDF export includes:
    • Custom title based on the resource name.
    • Generation timestamp.
    • Professional styling with slate-themed headers.
    • Page numbering and confidentiality footer.

Column Filtering (app.config.ts)

You can control which columns are included in your exports using the crud configuration in app/app.config.ts. This gives you the flexibility to hide sensitive fields like passwords or internal IDs from your exported documents.

// app.config.ts
export default defineAppConfig({
  crud: {
    exports: {
      pdf: {
        // Excluded from ALL resources in PDF
        globalExclude: ['avatar', 'resetToken'],
        // Resource specific overrides
        resourceExclude: {
          users: ['password', 'googleId'],
        },
      },
      excel: {
        resourceExclude: {
          users: ['password'],
        },
      },
    },
  },
})

Customization

The export logic is encapsulated in the useExport composable. You can find it at app/composables/useExport.ts.

Modifying PDF Styles

You can adjust the PDF appearance by modifying the exportToPDF function:

// app/composables/useExport.ts
autoTable(doc, {
  headStyles: { 
    fillColor: [51, 65, 85], // Slate 700
    // ...
  },
  // ...
})

Server-Side Performance

To keep the server bundle lean and avoid compatibility issues on platforms like Cloudflare Workers, export libraries are loaded dynamically on the client side only.

const { jsPDF } = await import('jspdf')
const { default: autoTable } = await import('jspdf-autotable')