JavaScript può generare cartelle di lavoro Excel direttamente nel browser. Con Spire.XLS for JavaScript, puoi creare una cartella di lavoro, aggiungere fogli di lavoro, scrivere valori e formule, applicare la formattazione e salvare il risultato come file XLSX o XLS—tutto lato client, senza richiedere l'installazione di Microsoft Excel.
Questo tutorial inizia con una cartella di lavoro XLSX di base e poi aggiunge valori di cella tipizzati, formule, formattazione, più fogli di lavoro, supporto al download dal browser, conversione CSV e output XLS per la compatibilità con i sistemi legacy.
Installare e inizializzare Spire.XLS for JavaScript
Spire.XLS for JavaScript è distribuito all'interno del pacchetto spire.office, insieme a Spire.PDF, Spire.Doc e Spire.Presentation:
npm i spire.office
L'avvio del runtime richiede due import. Il primo avvia l'host condiviso .NET WebAssembly; il secondo registra l'API del foglio di calcolo:
// 1. Boot the shared runtime once per page.
const common = await import('/node_modules/spire.office/spire.common.js');
await common.initializeWasm();
// 2. Load the spreadsheet engine — this is what creates window.spirexls.
await import('/node_modules/spire.office/spire.xls.js');
Gli archivi Spire.*.Wasm.zip e la cartella _framework devono essere raggiungibili dalla radice del sito. Il runtime li risolve rispetto all'URL del documento anziché rispetto al modulo che ha eseguito l'import, quindi in un progetto Vite o Create React App devono trovarsi in public/. Il prefisso process.env.PUBLIC_URL mostrato nelle configurazioni basate su React è una convenzione di Create React App, non uno standard del browser — adatta il percorso di base per farlo corrispondere al tuo strumento di build se non usi CRA. Se gli archivi mancano, il browser registra WebAssembly.compile(): expected magic word — il server di sviluppo ha risposto alla richiesta dell'archivio con index.html.
Poi tutto dipende da un unico global:
const xls = window.spirexls;
Nella configurazione attuale del pacchetto utilizzata in questo tutorial, l'API del foglio di calcolo è esposta tramite window.spirexls. Usa quel global dopo che il runtime è stato inizializzato. Le versioni precedenti la esponevano come window.wasmModule.spirexls; se stai lavorando con una versione diversa del pacchetto, verifica quale global è disponibile.
Ora sei pronto a generare file Excel.
Creare un file Excel di base in JavaScript
Costruiamo un report delle vendite. Creeremo una cartella di lavoro, aggiungeremo un foglio di lavoro, scriveremo i dati dei prodotti nelle celle e salveremo il risultato come file XLSX che viene scaricato automaticamente.
async function createExcelFile() {
const xls = window.spirexls;
if (!xls) {
console.error('Spire.XLS is not initialized.');
return;
}
// A fresh Workbook() already contains three blank worksheets, so clear them
// and add the single sheet this report needs.
const workbook = new xls.Workbook();
workbook.Worksheets.Clear();
const sheet = workbook.Worksheets.Add("Sales Report");
// Sample data: product sales
const data = [
["Product", "Quantity", "Price"],
["Laptop", 10, 999.99],
["Mouse", 50, 24.99],
["Keyboard", 30, 59.99],
["Monitor", 15, 329.99]
];
// Write data to cells
for (let row = 0; row < data.length; row++) {
for (let col = 0; col < data[row].length; col++) {
const cell = sheet.Range.get({ row: row + 1, column: col + 1 });
if (typeof data[row][col] === "string") {
cell.Text = data[row][col];
} else {
cell.NumberValue = data[row][col];
}
}
}
// Save to the virtual file system, read the bytes, download, then dispose
const fileName = "SalesReport.xlsx";
workbook.SaveToFile({
fileName: fileName,
version: xls.ExcelVersion.Version2016
});
const fileData = window.dotnetRuntime.Module.FS.readFile(fileName);
const blob = new Blob([fileData], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = fileName;
a.click();
URL.revokeObjectURL(url);
workbook.Dispose();
}
Chiama createExcelFile() e otterrai un SalesReport.xlsx con quattro righe di prodotto più un'intestazione. Il flusso di lavoro è semplice: creare la cartella di lavoro → scrivere i dati → salvare → scaricare.
Le sezioni seguenti estendono questo esempio. Ogni frammento di codice presuppone di essere aggiunto all'interno di createExcelFile() dopo che la cartella di lavoro e il foglio di lavoro sono stati creati.
Scrivere tipi di dati diversi nelle celle di Excel
Excel distingue tra testo, numeri, date e valori booleani. Sbagliare questo aspetto produce file in cui l'ordinamento si rompe, le formule restituiscono errori e i numeri vengono visualizzati come testo.
const sheet = workbook.Worksheets.get(0);
// Text — for labels, names, descriptions
sheet.Range.get("A1").Text = "Product Name";
// Number — for anything you'll calculate, sort, or filter
sheet.Range.get("B1").NumberValue = 999.99;
// Date — a real DateTimeValue plus a display format
const dateCell = sheet.Range.get("C1");
dateCell.DateTimeValue = new Date(Date.UTC(2025, 2, 15));
dateCell.NumberFormat = "yyyy-mm-dd";
// Boolean — use BooleanValue, not text
sheet.Range.get("D1").BooleanValue = true;
L'errore più comune? Scrivere cell.Text = "999.99" invece di cell.NumberValue = 999.99. Il valore sembra identico quando apri il file, ma Excel lo tratta come testo—non puoi sommarlo, calcolarne la media o ordinarlo numericamente. Usa sempre NumberValue per i numeri, DateTimeValue per le date e BooleanValue per i valori booleani.
Le date richiedono una precauzione aggiuntiva. DateTimeValue conserva l'istante UTC rappresentato dall'oggetto Date di JavaScript. Creare una data con la mezzanotte locale può quindi spostare il giorno visualizzato in alcuni fusi orari; usa Date.UTC() quando vuoi che una data di calendario specifica venga conservata.
Aggiungere formule al foglio di lavoro Excel
Le formule trasformano il file generato in un vero foglio di calcolo, non solo in un mucchio di dati. Aggiungiamo una colonna Total che calcola Quantity × Price per ogni riga, più un totale generale in fondo:
// Add "Total" header
sheet.Range.get({ row: 1, column: 4 }).Text = "Total";
// Per-row formula: Total = Quantity × Price
for (let i = 2; i <= 5; i++) {
sheet.Range.get({ row: i, column: 4 }).Formula = `=B${i}*C${i}`;
}
// Grand total row
sheet.Range.get({ row: 6, column: 1 }).Text = "Total";
sheet.Range.get({ row: 6, column: 2 }).Formula = "=SUM(B2:B5)";
sheet.Range.get({ row: 6, column: 4 }).Formula = "=SUM(D2:D5)";
// Evaluate the formulas once, so their results are written into the file.
workbook.CalculateAllValue();
Chiama workbook.CalculateAllValue() prima di salvare quando hai bisogno che la cartella di lavoro generata contenga i risultati calcolati delle formule. Questo è utile per visualizzatori o applicazioni che si affidano ai valori memorizzati nella cache invece di ricalcolare le formule all'apertura.
Per una guida completa sulle funzioni di Excel e sulle operazioni con le formule, consulta Inserire o leggere funzioni e formule nei fogli di lavoro Excel con JavaScript in React.
Formattare il file Excel generato
Un foglio di calcolo con dati grezzi funziona, ma un foglio formattato comunica. Trasformiamo il nostro report delle vendite in qualcosa che invieresti davvero a uno stakeholder:
// Bold, colored header row
const header = sheet.Range.get("A1:D1");
header.Style.Font.IsBold = true;
header.Style.Font.Size = 12;
header.Style.Color = xls.Color.get_LightSkyBlue();
// Currency format for Price and Total columns
for (let i = 2; i <= 5; i++) {
sheet.Range.get({ row: i, column: 3 }).NumberFormat = "$#,##0.00";
sheet.Range.get({ row: i, column: 4 }).NumberFormat = "$#,##0.00";
}
// Set column widths explicitly
[26, 10, 12, 12].forEach((width, i) => {
sheet.Columns.get(i).ColumnWidth = width;
});
// Clean borders
const usedRange = sheet.Range.get("A1:D6");
usedRange.Borders.LineStyle = xls.LineStyleType.Thin;
usedRange.Borders.Color = xls.Color.get_LightSteelBlue();
Due dettagli meritano attenzione qui. sheet.Columns.get(i) e sheet.Rows.get(i) sono basati su 0 e usano get, a differenza del get_Item esposto da altre collezioni. E nella configurazione del browser testata, AutoFitColumn richiede un font che non è disponibile nella sandbox WebAssembly, quindi impostare ColumnWidth esplicitamente è più affidabile.
Il risultato: un'intestazione blu in grassetto, prezzi formattati come valuta, colonne di dimensioni corrette e bordi puliti.
Per una guida dettagliata sulle dimensioni di righe e colonne, consulta Impostare l'altezza delle righe e la larghezza delle colonne in Excel con JavaScript in React.
Creare più fogli di lavoro in una cartella di lavoro Excel
I report reali raramente stanno su un solo foglio. Un report delle vendite può avere un riepilogo nella prima scheda, i dettagli dei prodotti nella seconda e i dettagli mensili nella terza.
workbook.Worksheets.Clear();
const summarySheet = workbook.Worksheets.Add("Summary");
const productsSheet = workbook.Worksheets.Add("Products");
const monthlySheet = workbook.Worksheets.Add("Monthly Data");
// Products sheet — write actual data so cross-sheet formulas work
productsSheet.Range.get("A1").Text = "Product";
productsSheet.Range.get("B1").Text = "Quantity";
productsSheet.Range.get("C1").Text = "Price";
productsSheet.Range.get("D1").Text = "Total";
const products = [
["Laptop", 10, 999.99],
["Mouse", 50, 24.99],
["Keyboard", 30, 59.99],
["Monitor", 15, 329.99]
];
for (let i = 0; i < products.length; i++) {
const row = i + 2;
productsSheet.Range.get({ row: row, column: 1 }).Text = products[i][0];
productsSheet.Range.get({ row: row, column: 2 }).NumberValue = products[i][1];
productsSheet.Range.get({ row: row, column: 3 }).NumberValue = products[i][2];
productsSheet.Range.get({ row: row, column: 4 }).Formula = `=B${row}*C${row}`;
}
// Summary sheet with cross-sheet reference
summarySheet.Range.get("A1").Text = "Sales Summary";
summarySheet.Range.get("A1").Style.Font.IsBold = true;
summarySheet.Range.get("A2").Text = "Total Products";
summarySheet.Range.get("B2").NumberValue = 4;
summarySheet.Range.get("A3").Text = "Total Revenue";
summarySheet.Range.get("B3").Formula = "=SUM(Products!D2:D5)";
Ogni Worksheets.Add(name) restituisce il foglio appena creato, nell'ordine in cui vengono effettuate le chiamate, quindi l'ordine delle schede corrisponde all'ordine del codice. Nota la formula tra fogli: =SUM(Products!D2:D5) nel foglio Summary fa riferimento alla colonna Total del foglio Products. Excel gestisce questo automaticamente all'apertura del file—non serve codice aggiuntivo.
Per ulteriori informazioni sulla gestione dei fogli di lavoro — aggiunta, rimozione e riordino dei fogli — consulta Aggiungere, rimuovere e spostare fogli di lavoro Excel con JavaScript in React.
Salvare e scaricare il file XLSX nel browser
Una volta che la cartella di lavoro è pronta, Spire.XLS la salva in un file system virtuale WebAssembly. Poi leggi i dati del file, li converti in un Blob e avvii il download:
workbook.SaveToFile({
fileName: "Report.xlsx",
version: xls.ExcelVersion.Version2016
});
const fileData = window.dotnetRuntime.Module.FS.readFile("Report.xlsx");
const blob = new Blob([fileData], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "Report.xlsx";
a.click();
URL.revokeObjectURL(url);
workbook.Dispose();
Chiama sempre workbook.Dispose() dopo il download per liberare memoria—soprattutto nelle app in cui gli utenti generano più file in una sessione. La cartella di lavoro stessa risiede nell'heap WebAssembly finché non lo fai, e quell'heap non viene recuperato dal garbage collector del browser.
Cerchi l'integrazione con React o l'esportazione di tabelle HTML? Dai un'occhiata alla nostra guida al download e all'esportazione di file Excel in JavaScript e React.
Mettere tutto insieme: un report delle vendite formattato
I frammenti precedenti costruiscono una cartella di lavoro un aspetto alla volta. Eccoli in un'unica funzione: un foglio di lavoro formattato con righe alternate (zebra) e formati di valuta, colonne Ricavi e Quota guidate da formule, un grafico a colonne e un secondo foglio di lavoro che riepiloga i numeri.
/**
* Build a formatted sales report workbook in the browser and download it as
* SalesReport.xlsx.
*
* The layout is driven by `products` below — swap it for form input, an API
* response or component state and nothing else needs to change.
*/
async function createExcelReport() {
// spire.office 11.7.0 exposes Spire.XLS as `window.spirexls`. Older builds
// hung it off `window.wasmModule.spirexls`; that global no longer exists.
const xls = window.spirexls;
if (!xls) throw new Error('Spire.XLS is not ready yet');
// [product, units sold, unit price] — revenue and share are derived by formula
const products = [
['Atlas 14 Ultrabook', 42, 1249.0],
['Orbit Wireless Mouse', 380, 24.99],
['Vertex Mechanical Keyboard', 165, 89.5],
['Lumen 27 4K Monitor', 74, 429.0],
['Halo USB-C Dock', 210, 139.0],
['Pulse ANC Headset', 128, 199.0],
];
const FIRST = 5; // first data row
const TOTAL = FIRST + products.length; // total row
const wb = new xls.Workbook();
wb.Worksheets.Clear();
const sheet = wb.Worksheets.Add('Sales Report');
const at = (a) => sheet.Range.get(a);
const cell = (row, col) => sheet.Range.get({ row: row, column: col });
const paint = (a, colour) => {
at(a).Style.Color = colour;
};
// ── Sizing ── explicit widths (AutoFitColumn is unreliable in the WASM sandbox)
[34, 9, 13, 14, 9].forEach((w, i) => {
sheet.Columns.get(i).ColumnWidth = w;
});
sheet.Rows.get(0).RowHeight = 34; // title
sheet.Rows.get(1).RowHeight = 20; // subtitle
sheet.Rows.get(2).RowHeight = 8; // spacer
sheet.Rows.get(3).RowHeight = 24; // header
// ── Title band ── merge first, then style the whole merged area
at('A1:E1').Merge();
cell(1, 1).Text = 'Sales Report — Q3 2026';
paint('A1:E1', xls.Color.get_DarkBlue());
at('A1:E1').Style.Font.Color = xls.Color.get_White();
at('A1:E1').Style.Font.IsBold = true;
at('A1:E1').Style.Font.Size = 15;
at('A1:E1').Style.VerticalAlignment = xls.VerticalAlignType.Center;
at('A2:E2').Merge();
cell(2, 1).Text = 'Region: West · Period: 1 Jul – 30 Sep 2026 · Amounts in USD';
paint('A2:E2', xls.Color.get_DarkBlue());
at('A2:E2').Style.Font.Color = xls.Color.get_LightSteelBlue();
at('A2:E2').Style.Font.Size = 9.5;
at('A2:E2').Style.VerticalAlignment = xls.VerticalAlignType.Center;
// ── Header row ───────────────────────────────────────────────────────────
['Product', 'Units', 'Unit Price', 'Revenue', 'Share'].forEach((label, i) => {
cell(4, i + 1).Text = label;
});
paint('A4:E4', xls.Color.get_LightSteelBlue());
at('A4:E4').Style.Font.Color = xls.Color.get_DarkBlue();
at('A4:E4').Style.Font.IsBold = true;
at('A4:E4').Style.Font.Size = 10.5;
at('A4:E4').Style.HorizontalAlignment = xls.HorizontalAlignType.Center;
at('A4:E4').Style.VerticalAlignment = xls.VerticalAlignType.Center;
// ── Data rows ── numbers go in as NumberValue, never as text
products.forEach(([name, units, price], i) => {
const r = FIRST + i;
cell(r, 1).Text = name;
cell(r, 2).NumberValue = units;
cell(r, 3).NumberValue = price;
cell(r, 4).Formula = `=B${r}*C${r}`;
cell(r, 5).Formula = `=D${r}/$D${TOTAL}`; // share of the grand total
sheet.Rows.get(r - 1).RowHeight = 20;
if (i % 2) paint(`A${r}:E${r}`, xls.Color.get_WhiteSmoke()); // zebra banding
});
// ── Total row ────────────────────────────────────────────────────────────
cell(TOTAL, 1).Text = 'Total';
[2, 4, 5].forEach((col) => {
const letter = String.fromCharCode(64 + col);
cell(TOTAL, col).Formula = `=SUM(${letter}${FIRST}:${letter}${TOTAL - 1})`;
});
paint(`A${TOTAL}:E${TOTAL}`, xls.Color.get_LightSkyBlue());
at(`A${TOTAL}:E${TOTAL}`).Style.Font.IsBold = true;
sheet.Rows.get(TOTAL - 1).RowHeight = 22;
// ── Number formats and borders ───────────────────────────────────────────
at(`B${FIRST}:B${TOTAL}`).NumberFormat = '#,##0';
at(`C${FIRST}:D${TOTAL}`).NumberFormat = '$#,##0.00';
at(`E${FIRST}:E${TOTAL}`).NumberFormat = '0.0%';
const table = at(`A4:E${TOTAL}`);
table.Borders.LineStyle = xls.LineStyleType.Thin;
table.Borders.Color = xls.Color.get_LightSteelBlue();
at(`A${TOTAL}:E${TOTAL}`).Borders.get_Item(xls.BordersLineType.EdgeTop).LineStyle =
xls.LineStyleType.Medium;
// ── Chart ── build the series by hand (DataRange would mix units)
const chart = sheet.Charts.Add();
chart.ChartType = xls.ExcelChartType.ColumnClustered;
chart.LeftColumn = 6;
chart.TopRow = 3;
chart.RightColumn = 13;
chart.BottomRow = 21;
const serie = chart.Series.Add();
serie.CategoryLabels = at(`A${FIRST}:A${TOTAL - 1}`);
serie.Values = at(`D${FIRST}:D${TOTAL - 1}`);
serie.Name = 'Revenue';
chart.ChartTitleArea.Text = 'Revenue by product';
chart.HasLegend = false;
chart.PrimaryValueAxis.NumberFormat = '$#,##0';
// ── Sheet chrome ──
sheet.FreezePanes(FIRST, 1);
sheet.GridLinesVisible = false;
sheet.TabColor = xls.Color.get_DarkBlue();
// ── Second worksheet: cross-sheet roll-up ──
const summary = wb.Worksheets.Add('Summary');
summary.Columns.get(0).ColumnWidth = 26;
summary.Columns.get(1).ColumnWidth = 18;
summary.Rows.get(0).RowHeight = 30;
summary.Rows.get(1).RowHeight = 18;
summary.Rows.get(3).RowHeight = 22;
const band = (a, text, size) => {
summary.Range.get(a).Merge();
summary.Range.get(a.split(':')[0]).Text = text;
summary.Range.get(a).Style.Color = xls.Color.get_DarkBlue();
summary.Range.get(a).Style.Font.Color = xls.Color.get_White();
summary.Range.get(a).Style.Font.IsBold = true;
summary.Range.get(a).Style.Font.Size = size;
summary.Range.get(a).Style.VerticalAlignment = xls.VerticalAlignType.Center;
};
band('A1:B1', 'Executive Summary', 14);
band('A2:B2', 'Sales Report · Q3 2026', 9.5);
['Metric', 'Value'].forEach((label, i) => {
summary.Range.get({ row: 4, column: i + 1 }).Text = label;
});
summary.Range.get('A4:B4').Style.Color = xls.Color.get_LightSteelBlue();
summary.Range.get('A4:B4').Style.Font.Color = xls.Color.get_DarkBlue();
summary.Range.get('A4:B4').Style.Font.IsBold = true;
[
['Total revenue', "='Sales Report'!D" + TOTAL, '$#,##0.00'],
['Units shipped', "='Sales Report'!B" + TOTAL, '#,##0'],
['Average unit price', `='Sales Report'!D${TOTAL}/'Sales Report'!B${TOTAL}`, '$#,##0.00'],
].forEach(([label, formula, format], i) => {
summary.Range.get({ row: 5 + i, column: 1 }).Text = label;
const value = summary.Range.get({ row: 5 + i, column: 2 });
value.Formula = formula;
value.NumberFormat = format;
value.Style.HorizontalAlignment = xls.HorizontalAlignType.Right;
if (i % 2) summary.Range.get(`A${5 + i}:B${5 + i}`).Style.Color = xls.Color.get_WhiteSmoke();
});
// Date — use Date.UTC to avoid timezone shift
summary.Range.get('A8').Text = 'Report date';
const reportDate = summary.Range.get('B8');
reportDate.DateTimeValue = new Date(Date.UTC(2026, 8, 28));
reportDate.NumberFormat = 'yyyy-mm-dd';
reportDate.Style.HorizontalAlignment = xls.HorizontalAlignType.Right;
const kpis = summary.Range.get('A4:B8');
kpis.Borders.LineStyle = xls.LineStyleType.Thin;
kpis.Borders.Color = xls.Color.get_LightSteelBlue();
summary.GridLinesVisible = false;
summary.TabColor = xls.Color.get_LightSteelBlue();
// ── Save, then release ──
wb.CalculateAllValue();
const fileName = 'SalesReport.xlsx';
wb.SaveToFile({ fileName: fileName, version: xls.ExcelVersion.Version2016 });
const fileData = window.dotnetRuntime.Module.FS.readFile(fileName);
const blob = new Blob([fileData], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
});
const url = URL.createObjectURL(blob);
Object.assign(document.createElement('a'), { href: url, download: fileName }).click();
URL.revokeObjectURL(url);
wb.Dispose(); // free the WASM heap — one workbook per generation cycle
}
Il layout segue i dati. Sostituisci l'array products con una risposta della tua API e tutto il resto — totali, percentuali di quota, intervallo del grafico, riepilogo — continua a funzionare, perché è tutto espresso come formule o intervalli derivati anziché come valori hard-coded.
Per altri tipi di grafici e opzioni di configurazione, consulta Creare grafici Excel con JavaScript in React.
Creare un file Excel da dati CSV
Puoi caricare dati tabulari da un file CSV in un foglio di lavoro e salvare il risultato come XLSX. La cartella di lavoro risultante può poi essere formattata o estesa con formule e fogli di lavoro aggiuntivi:
// The library reads from its own virtual file system, so the CSV has to be
// there before you can load it — written from a string here, from the bytes of
// a File object in a real application.
const csv = "Product,Quantity,Price\nLaptop,10,999.99\nMouse,50,24.99\nKeyboard,30,59.99";
window.dotnetRuntime.Module.FS.writeFile("data.csv", new TextEncoder().encode(csv));
workbook.LoadFromFile("data.csv", ",");
workbook.SaveToFile({
fileName: "ConvertedFromCSV.xlsx",
version: xls.ExcelVersion.Version2016
});
Il foglio importato prende il nome dal file (data), quindi Worksheets.get(0) lo seleziona.
Il separatore è un secondo argomento obbligatorio. LoadFromFile("data.csv") da solo viene rifiutato con This is not a structured storage file, perché l'overload con un solo argomento si aspetta un formato strutturato come .xlsx o .xls e non riconosce il CSV.
C'è una seconda insidia: l'importatore CSV scrive ogni campo come testo. Una colonna di quantità arriva come "10" anziché 10, il che significa che non può essere sommata o ordinata numericamente — esattamente il problema descritto in precedenza in questo tutorial. Converti le colonne di cui hai bisogno prima di salvare:
const csvSheet = workbook.Worksheets.get(0);
// The importer leaves every field as text — coerce each numeric column.
// Columns 2 and 3 hold Quantity and Price; both arrive as "10" and "999.99".
for (let row = 2; row <= 4; row++) {
[2, 3].forEach((column) => {
const cell = csvSheet.Range.get({ row: row, column: column });
if (cell.Text !== "") {
cell.NumberValue = Number(cell.Text);
}
});
}
Per una guida completa sulla conversione tra formati CSV ed Excel, consulta il nostro tutorial sulla conversione da CSV a Excel.
Creare un file XLS invece di XLSX
Se la tua applicazione deve generare il formato legacy .xls invece di .xlsx, modifica il parametro version:
workbook.SaveToFile({
fileName: "Report.xls",
version: xls.ExcelVersion.Version97to2003
});
Il membro dell'enum è Version97to2003 — non esiste Version97. Mantieni i grafici in XLSX; il writer XLS testato fallisce quando sono richieste le metriche dei font dei grafici.
XLSX (Excel 2007+) è il formato consigliato per le nuove applicazioni. XLS (Excel 97–2003) è necessario solo quando è richiesta la compatibilità con le versioni precedenti.
Problemi comuni
window.wasmModule non è definito. I vecchi esempi leggono l'API del foglio di calcolo da window.wasmModule.spirexls. Le versioni attuali la installano direttamente su window.spirexls e lasciano wasmModule non definito, quindi il primo accesso genera un'eccezione. Controlla invece window.spirexls.
Modulo WASM non inizializzato. Se window.spirexls non è definito, il runtime non ha terminato il caricamento. Mostra un indicatore di caricamento e attendi il completamento dell'inizializzazione prima di tentare qualsiasi operazione su Excel.
L'adattamento automatico genera un errore sui font. AutoFitColumn e AutoFitRow richiedono un font di sistema per misurare il testo, e la sandbox WebAssembly non ne ha nessuno. Falliscono con Cannot found font(Arial) installed on the system. Calcola o codifica manualmente la larghezza delle colonne con sheet.Columns.get(i).ColumnWidth.
Numeri memorizzati come testo. Usare cell.Text = "100" invece di cell.NumberValue = 100 rompe l'ordinamento e i calcoli. Questo è il problema più comune che gli sviluppatori incontrano quando scrivono file Excel in JavaScript, e l'importazione CSV lo attiva automaticamente—usa sempre NumberValue per i dati numerici.
Compare un foglio "Evaluation Warning". Quando si utilizza la build di valutazione senza una licenza valida, Spire.XLS aggiunge un foglio di valutazione alla cartella di lavoro salvata. Questo foglio viene ricreato al salvataggio, quindi rimuoverlo a livello di codice non è una soluzione affidabile. Applica una chiave di licenza per evitarlo.
Perdite di memoria nelle app a esecuzione prolungata. Chiama workbook.Dispose() dopo ogni ciclo di generazione. Nelle applicazioni a pagina singola, le cartelle di lavoro non eliminate accumulano memoria e degradano le prestazioni nel tempo.
Domande frequenti
JavaScript può creare file Excel senza Microsoft Excel?
Sì. Spire.XLS for JavaScript viene eseguito interamente nel browser tramite WebAssembly. Non è necessaria alcuna installazione di Microsoft Excel o di Office lato server per generare file XLSX.
JavaScript può creare file XLSX direttamente nel browser?
Sì. Tutte le operazioni sul foglio di calcolo avvengono lato client. Il file viene salvato in un file system virtuale, quindi scaricato come Blob—non serve alcun server backend.
Qual è la differenza tra XLS e XLSX?
XLSX (Excel 2007 e versioni successive) è il formato moderno basato su XML, consigliato per le nuove applicazioni. XLS (Excel 97–2003) è il formato binario legacy, utile per la compatibilità con sistemi più vecchi.
Conclusione
Creare file Excel in JavaScript non richiede un server backend né Microsoft Excel. Con Spire.XLS for JavaScript, puoi creare cartelle di lavoro da zero, scrivere dati tipizzati, aggiungere formule, applicare la formattazione e organizzare i dati su più fogli—tutto nel browser.
Inizia con l'esempio di base sopra, poi aggiungi gradualmente formule e formattazione man mano che le tue esigenze crescono. Per l'integrazione specifica con React e l'esportazione di tabelle HTML, consulta il nostro tutorial dedicato all'esportazione.