DEV Community

Cover image for Export Real Excel Workbooks in JavaScript (Part 2): Using Excel Templates with Connected Workbooks
Meni Kroizer
Meni Kroizer

Posted on

Export Real Excel Workbooks in JavaScript (Part 2): Using Excel Templates with Connected Workbooks

In Part 1, we looked at how to export real Excel workbooks from JavaScript using Connected Workbooks.
In practice, though, most teams don’t want raw tables, they want reports that follow existing Excel templates with charts, formulas, and branding already in place.
This is where Connected Workbooks really starts to shine.
With template-based exports:

In Excel you defines how the workbook looks,
Your application defines what data goes into it,
Connected Workbooks lets you keep that boundary clean.

What an "Excel Template" Means Here

An Excel template, in this context, is simply:
A normal .xlsx file,Created and edited in Excel Containing one or more named tables,
Those tables act as injection points.

Connected Workbooks does not generate charts, formulas, or formatting. Instead, it:

  • Loads the template
  • Finds a named table
  • Replaces its rows with new data
  • Produces a final workbook where everything else stays intact

Because formulas and charts reference tables, they update automatically when the data changes.

Preparing an Excel Template (Excel-Side Work)

Before writing any code, you prepare the template in Excel.
A typical flow looks like this:

  1. Open Excel and create a new workbook
  2. Add a worksheet (for example: Dashboard)
  3. Insert a table (Ctrl + T)
  4. Name the table (for example: SalesTable)
  5. Build formulas, charts, or PivotTables that reference that table in a diffrent sheet
  6. Apply branding and formatting
  7. Save the file as .xlsx

The table name and sheet name are critical this is how your application knows where to inject data.

From this point on, Excel owns presentation, and your code only supplies rows.

Using a Template with Connected Workbooks

At runtime, your application loads the template and injects data into the named table.
Conceptually, the flow is:
Your App -> Template Workbook -> Inject Data -> Final Excel Workbook

Here’s a complete example.

Example: Injecting Data into a Template Table

import { WorkbookManager } from "@microsoft/connected-workbooks";

// Method 1: File upload from user
const templateInput = document.querySelector('#template-upload') as HTMLInputElement;
const templateFile = templateInput.files[0];

// Method 2: Fetch from your server
const templateResponse = await fetch('/assets/templates/sales-dashboard.xlsx');
const templateFile = await templateResponse.blob();

// Method 3: Drag and drop
function handleTemplateDrop(event: DragEvent) {
  const templateFile = event.dataTransfer.files[0];
  // Use templateFile with the library
}

const quarterlyData = {
  config: { promoteHeaders: true, adjustColumnNames: true },
  data: [
    ["Region", "Q3_Revenue", "Q4_Revenue", "Growth", "Target_Met"],
    ["North America", 2500000, 2750000, "10%", true],
    ["Europe", 1800000, 2100000, "17%", true],
    ["Asia Pacific", 1200000, 1400000, "17%", true],
    ["Latin America", 800000, 950000, "19%", true]
  ]
};

// Inject data into your branded template
const blob = await workbookManager.generateTableWorkbookFromGrid(
  quarterlyData,
  undefined, // Use template's existing data structure
  {
    templateFile: templateFile,
    TempleteSettings: {
      sheetName: "Dashboard",     // Target worksheet
      tableName: "QuarterlyData"  // Target table name
    }
  }
);

// Users get a fully branded report
workbookManager.openInExcelWeb(blob, "Q4_Executive_Dashboard.xlsx", true);
Enter fullscreen mode Exit fullscreen mode

What happens here:

  1. The template workbook is loaded as-is
  2. The quarterlyData table on the Dashboard sheet is replaced with new rows
  3. All formulas, charts, and formatting remain untouched
  4. The final workbook opens directly in Excel Online
  5. No XLSX manipulation, no XML, no fragile formatting code.

Real-World Template Scenarios

This approach works especially well for:

  • Analytics Dashboards
  • Export operational data into Excel dashboards that analysts can customize further.
  • Reporting Tools
  • Weekly or monthly reports built on templates with preconfigured formulas and summaries.
  • Finance & Operations
  • Reconciliation workbooks where formulas and validation rules are critical.
  • Admin & Internal Systems
  • Simple “Export to Excel” buttons that still produce polished, trustworthy reports. In all of these cases, templates allow Excel to remain the reporting engine, while your app supplies fresh data.

Best Practices When Using Templates

A few lessons that help avoid common pitfalls:

  • Version templates alongside your application
  • Avoid renaming tables without updating code
  • Test template changes during development, not only in production
  • Treat templates as part of your system contract.

Top comments (0)