DEV Community: Meni Kroizer

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

Meni Kroizer — Tue, 13 Jan 2026 15:12:06 +0000

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:

Open Excel and create a new workbook
Add a worksheet (for example: Dashboard)
Insert a table (Ctrl + T)
Name the table (for example: SalesTable)
Build formulas, charts, or PivotTables that reference that table in a diffrent sheet
Apply branding and formatting
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);

What happens here:

The template workbook is loaded as-is
The quarterlyData table on the Dashboard sheet is replaced with new rows
All formulas, charts, and formatting remain untouched
The final workbook opens directly in Excel Online
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.

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

Meni Kroizer — Tue, 13 Jan 2026 15:12:06 +0000

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:

Open Excel and create a new workbook
Add a worksheet (for example: Dashboard)
Insert a table (Ctrl + T)
Name the table (for example: SalesTable)
Build formulas, charts, or PivotTables that reference that table in a diffrent sheet
Apply branding and formatting
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);

What happens here:

The template workbook is loaded as-is
The quarterlyData table on the Dashboard sheet is replaced with new rows
All formulas, charts, and formatting remain untouched
The final workbook opens directly in Excel Online
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.

How to Export Real Excel Workbooks in JavaScript Using Connected Workbooks

Meni Kroizer — Tue, 30 Dec 2025 14:03:24 +0000

if you're exporting data to Excel today, chances are you're generating CSV files or using a basic XLSX utility. Those approaches work—but they hit limits quickly:

CSV can’t preserve data types
No formulas, formatting, or tables
No Power Query or refresh logic
No way to integrate with Excel Online When developers want actual Excel behavior, not just a file with .xlsx at the end, CSV falls short. That’s where Connected Workbooks comes in. This guide walks you through what the library is, how it works, and how to use it to export real Excel workbooks directly from your JavaScript or TypeScript application.

1. Introduction

CSV exports are simple but limited. They can’t express:

Rich tables
Metadata
Styling
Reusable worksheets
Query connections
Real Excel structures

For teams building dashboards, admin tools, or analytics views, CSV‑only exports become frustrating. What you really want is an Excel workbook that behaves like something produced by Excel—tables, queries, refresh logic, templates.
Connected Workbooks gives you that with a few lines of code.

2. What Is Connected Workbooks?

Connected Workbooks is an open-source JavaScript/TypeScript library maintained by Microsoft.
Repo: https://github.com/microsoft/connected-workbooks
Its purpose is simple:

Take data in your web or backend application and generate a real Excel (.xlsx) workbook—complete with tables, queries, or templates.

It acts as a bridge between your app and Excel:

Your app provides HTML tables, arrays, grid data, and Power Query query
Connected Workbooks turns that into structured Excel tables
Produces a Blob
You can download it or open it instantly in Excel Online

This makes exporting Excel files feel like generating PDFs—simple, declarative, reliable.

3. How Connected Workbooks Works

The mental model is straightforward:
Your Application → Connected Workbooks → Excel Workbook (.xlsx)
Data sources you provide

HTML <table> elements
Grid or array data
Power Query mashups
Excel templates with named tables

What the library produces

Excel tables (not static pasted values)
Workbooks with sheets, metadata, and table definitions
Optional Power Query connections
A final .xlsx Blob/Buffer

Static exports vs. Connected Workbooks

CSV/Basic XLSX	Connected Workbooks
Raw values	Real Excel tables
No metadata	Column types, names,formats
No refresh logic	Optional Power Query refreah
No structual awareness	Template, table injection

4. Installation

npm install @microsoft/connected-workbooks

5. Practical Walkthrough: Exporting an HTML Table

Let’s build the simplest useful example:
Take an existing <table> from the DOM and export it as a real Excel table.
for example


<table id="salesTable">
  <thead>
    <tr>
      <th>Product</th>
      <th>Units</th>
      <th>Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Keyboard</td><td>12</td><td>480</td></tr>
    <tr><td>Mouse</td><td>18</td><td>360</td></tr>
  </tbody>
</table>

Generate a workbook from that table


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

const workbookManager = new WorkbookManager();

async function exportTable() {
  const tableElement = document.getElementById("salesTable");

  const blob = await workbookManager.generateTableWorkbookFromHtml(tableElement);

  // Option 1 — download locally
  workbookManager.download(blob, "sales.xlsx");

  // Option 2 — open directly in Excel Online
  workbookManager.openInExcelWeb(blob, "sales.xlsx", true);
}

This instantly gives your users a professional, Excel‑native export—without building any XLSX structures by hand.

Real-World Use Cases

Here are places where Connected Workbooks becomes a superpower:
Analytics dashboards
Export charts, tables, and raw data into a workbook analysts can modify.
Reporting tools
Monthly or weekly reports based on templates with prebuilt formulas.
Admin / internal systems
Simple "Export to Excel" buttons that create real Excel tables—not plain CSVs.
These scenarios benefit from structure, formatting, Power Query, or templates.

Conclusion

If you’ve outgrown CSV exports or want to give your users a native Excel experience, Connected Workbooks is a practical, developer-friendly option. It keeps your code simple while producing real, structured Excel workbooks that users can trust.
Explore more patterns, examples, and utility functions here:
https://github.com/microsoft/connected-workbooks