### Set Excel Page Setup (Paper Size and Order)

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Provides an example of setting the paper size and page order for an Excel worksheet using Spire.XLS for JavaScript. It shows how to get the worksheet's PageSetup object and configure the Order and PaperSize properties.

```javascript
// Create a new workbook
const book = wasmModule.Workbook.Create();

// Get the first worksheet
let sheet = book.Worksheets.get(0);

// Get the reference of the PageSetup of the worksheet
let pageSetup = sheet.PageSetup;

// Set the order type of the pages to over then down
pageSetup.Order = wasmModule.OrderType.OverThenDown;
```

--------------------------------

### Set Excel Page Setup First Page Number

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Illustrates how to set the starting page number for an Excel worksheet using Spire.XLS for JavaScript. It involves accessing the worksheet's PageSetup object and setting the FirstPageNumber property.

```javascript
// Get the first worksheet.
let sheet = book.Worksheets.get(0);

// Set the first page number of the worksheet pages.
sheet.PageSetup.FirstPageNumber = 2;
```

--------------------------------

### Create Excel Workbook with Multiple Sheets and Save

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This example shows how to create an Excel workbook with five sheets, populate them with data, and then save the workbook to a file. It also includes resource cleanup.

```javascript
// Create a new workbook
const workbook = wasmModule.Workbook.Create();

// Add 5 empty sheets to the workbook
workbook.CreateEmptySheets(5);

// Loop through each sheet to populate it with data
for (let i = 0; i < 5; i++) {
    let sheet = workbook.Worksheets.get(i);
    sheet.Name = `Sheet${i}`;
    for (let row = 1; row <= 150; row++) {
        for (let col = 1; col <= 50; col++) {
            sheet.Range.get({row:row, column:col}).Text = `row${row} col${col}`;
        }
    }
}

// Save the workbook to the specified path
workbook.SaveToFile({fileName: 'CreateAnExcelWithFiveSheet.xlsx', fileFormat: wasmModule.ExcelVersion.Version2010});

// Clean up resources
workbook.Dispose();
```

--------------------------------

### Convert Worksheet to HTML Stream

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Provides an example of converting an Excel worksheet to an HTML stream, allowing for more flexible handling of the output.

```javascript
const workbook = wasmModule.Workbook.Create();
workbook.LoadFromFile({fileName: inputFileName});
let sheet = workbook.Worksheets.get(0);
let options = wasmModule.HTMLOptions.Create();
options.ImageEmbedded = true;
let fileStream = wasmModule.Stream.CreateByFile(outputFileName);
sheet.SaveToHtml({stream:fileStream, saveOption:options});
fileStream.Dispose();
workbook.Dispose();
```

--------------------------------

### Simple Excel to PDF Conversion

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This is a straightforward example of converting an Excel file to PDF format. It loads an Excel file and saves it as a PDF, ensuring the workbook object is disposed of afterward.

```javascript
let inputFileName = 'ToPDF.xlsx';

// Create a new workbook
const workbook = wasmModule.Workbook.Create();
// Load an existing Excel document
workbook.LoadFromFile({fileName: inputFileName});

const outputFileName = 'ToPDFSimply-out.pdf';
// Save to PDF
workbook.SaveToFile({fileName:outputFileName, fileFormat: wasmModule.FileFormat.PDF});
// Dispose of the object to release resources
workbook.Dispose();
```

--------------------------------

### Convert Excel Worksheet to CSV

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Provides an example of converting an entire Excel worksheet to a CSV file, specifying the separator and encoding.

```javascript
const workbook = wasmModule.Workbook.Create();
workbook.LoadFromFile({fileName: inputFileName});
let sheet = workbook.Worksheets.get(0);
const outputFileName = 'ToCSV-out.csv';
sheet.SaveToFile({fileName:outputFileName, separator:",", encoding:wasmModule.Encoding.get_UTF8()});
workbook.Dispose();
```

--------------------------------

### Convert Excel Shape to Image File

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This code example shows how to convert an Excel shape into an image file. It involves getting a specific shape from a worksheet and then using the `SaveToImage` method to create an image object, which is subsequently saved to a file.

```javascript
// Get the first worksheet
let sheet1 = workbook.Worksheets.get(0);

// Get the first shape from the first worksheet
let shape = sheet1.PrstGeomShapes.get(0);

// Save the shape to an image
let img = shape.SaveToImage();
let outputFile = "ShapeToImage.png"
img.Save(outputFile);
```

--------------------------------

### Create Pie Chart

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Provides an example of creating a pie chart in an Excel worksheet. It includes setting the chart type, data range, position, title, category labels, and values.

```javascript
let sheet = workbook.Worksheets.get(0);
sheet.Name = "Pie Chart";
let chart = sheet.Charts.Add({chartType:wasmModule.ExcelChartType.Pie});
chart.DataRange = sheet.Range.get("B2:B5");
chart.SeriesDataFromRange = false;
chart.LeftColumn = 1;
chart.TopRow = 6;
chart.RightColumn = 9;
chart.BottomRow = 25;
chart.ChartTitle = "Sales by year";
chart.ChartTitleArea.IsBold = true;
chart.ChartTitleArea.Size = 12;
let cs = chart.Series.get(0);
cs.CategoryLabels = sheet.Range.get("A2:A5");
cs.Values = sheet.Range.get("B2:B5");
cs.DataPoints.DefaultDataPoint.DataLabels.HasValue = true;
chart.PlotArea.Fill.Visible = false;
```

--------------------------------

### Convert Excel Workbook to HTML

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This example shows how to convert an entire Excel workbook to HTML format. It loads the workbook and then saves it as an HTML file, specifying the output directory and filename.

```javascript
const workbook = wasmModule.Workbook.Create();
workbook.LoadFromFile({
  fileName: outputDirectoryName + inputFileName,
});

const outputFileName = "WorkbookToHTML-out.html";
workbook.SaveToHtml({
  fileName: outputDirectoryName + outputFileName,
});

workbook.Dispose();
```

--------------------------------

### Create and Calculate SUBTOTAL Formulas in JavaScript

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This example shows how to create a new Excel workbook and populate it with data. It then demonstrates adding SUBTOTAL formulas to specific cells and calculating all formulas within the workbook using Spire.XLS for JavaScript.

```javascript
//Create a workbook
const workbook = wasmModule.Workbook.Create();

//Get the first sheet
const sheet = workbook.Worksheets.get(0);

sheet.Range.get("A1").NumberValue = 1;
sheet.Range.get("A2").NumberValue = 2;
sheet.Range.get("A3").NumberValue = 3;
sheet.Range.get("B1").NumberValue = 4;
sheet.Range.get("B2").NumberValue = 5;
sheet.Range.get("B3").NumberValue = 6;
sheet.Range.get("C1").NumberValue = 7;
sheet.Range.get("C2").NumberValue = 8;
sheet.Range.get("C3").NumberValue = 9;

//Add SUBTOTAL formulas
sheet.Range.get("A5").Formula = "=SUBTOTAL(1,A1:C3)";
sheet.Range.get("B5").Formula = "=SUBTOTAL(2,A1:C3)";
sheet.Range.get("C5").Formula = "=SUBTOTAL(5,A1:C3)";

//Calculate Formulas
workbook.CalculateAllValue();
```

--------------------------------

### Load and Save Excel Files with Macros

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Shows how to load an Excel file that contains macros and then save it. The example loads a file, modifies a cell in the first worksheet, and saves the modified workbook.

```javascript
const book = wasmModule.Workbook.Create();
book.LoadFromFile("MacroSample.xls");

let sheet = book.Worksheets.get(0);
sheet.Range.get("A5").Text = "This is a simple test!";

book.SaveToFile({ fileName: "LoadAndSaveFileWithMacro_output.xlsx" });

book.Dispose();
```

--------------------------------

### Retrieve All Named Ranges from Excel

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This example shows how to retrieve the names of all named ranges present in an Excel workbook and save them to a text file. It iterates through the NameRanges collection and logs each name.

```javascript
// Create a new workbook
const book = wasmModule.Workbook.Create();
book.LoadFromFile({
  fileName: excelFileName,
  version: wasmModule.ExcelVersion.Version2010,
});

let sb = [];
// Get all named ranges
let ranges = book.NameRanges;
for (let i = 0; i < ranges.Count; i++) {
  let nameRange = ranges.get(i);
  sb.push(nameRange.Name);
}

// Define the output file name
const outputFileName = "GetAllNamedRange.txt";
// Save result file
wasmModule.FS.writeFile(outputFileName, sb.join("\n"));
```

--------------------------------

### Duplicate Cell Range in Excel with Formatting

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This example shows how to duplicate a cell range in Excel, including its formatting. It copies data from a source range to a destination range while preserving the style.

```javascript
sheet.Copy({
  sourceRange: sheet.Range.get("A6:F6"),
  destRange: sheet.Range.get("A16:F16"),
  copyStyle: true,
});
```

--------------------------------

### Set Excel Page Setup Header and Footer Margins

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Demonstrates how to set the header and footer margins for an Excel worksheet using Spire.XLS for JavaScript. It shows how to access the PageSetup object and set the HeaderMarginInch and FooterMarginInch properties.

```javascript
// Get the PageSetup object of the first worksheet.
let pageSetup = sheet.PageSetup;

// Set the margins of header and footer.
pageSetup.HeaderMarginInch = 2;
pageSetup.FooterMarginInch = 2;
```

--------------------------------

### Create Formula-Based Conditional Formatting

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Creates a formula-based conditional formatting rule in Excel, applying it to a specified range. The example highlights cells where the value in column A is less than the value in column B.

```javascript
// Get the first worksheet and the first column from the workbook
const sheet = workbook.Worksheets.get(0);
const range = sheet.Columns.get(0);

// Set the conditional formatting formula and apply the rule to the chosen cell range
const xcfs = sheet.ConditionalFormats.Add();
xcfs.AddRange(range);
const conditional = xcfs.AddCondition();
conditional.FormatType = wasmModule.ConditionalFormatType.Formula;
conditional.FirstFormula = "=($A1<$B1)";
conditional.BackKnownColor = wasmModule.ExcelColors.Yellow;
```

--------------------------------

### Show Leader Lines for Data Labels

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Provides a JavaScript example for displaying leader lines for data labels in an Excel chart. It creates a stacked bar chart and then iterates through its series to enable leader lines for data points.

```javascript
// Add a chart with BarStacked type
let chart = sheet.Charts.Add({ chartType: wasmModule.ExcelChartType.BarStacked });
chart.DataRange = sheet.Range.get("A1:C3");
chart.TopRow = 4;
chart.LeftColumn = 2;
chart.Width = 450;
chart.Height = 300;

// Show leader lines for data labels in chart series
for (let cs of chart.Series) {
    cs.DataPoints.DefaultDataPoint.DataLabels.HasValue = true;
    cs.DataPoints.DefaultDataPoint.DataLabels.ShowLeaderLines = true;
}
```

--------------------------------

### Format DataBar Border in Excel

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This example demonstrates how to format the border of a DataBar in Excel using JavaScript. It includes setting the border type to solid and applying a specific color, as well as creating a new DataBar with different formatting.

```javascript
const xcfs = sheet.ConditionalFormats.get(0);
const cf = xcfs.get(0);
const dataBar1 = cf.DataBar;
dataBar1.BarBorder.Type = wasmModule.DataBarBorderType.DataBarBorderSolid;
dataBar1.BarBorder.Color = wasmModule.Color.get_Red();
sheet.Range.get("E1").NumberValue = 200;
const xcfs2 = sheet.ConditionalFormats.Add();
xcfs2.AddRange(sheet.Range.get("E1"));
const cf2 = xcfs2.AddCondition();
cf2.FormatType = wasmModule.ConditionalFormatType.DataBar;
cf2.DataBar.BarBorder.Type = wasmModule.DataBarBorderType.DataBarBorderSolid;
cf2.DataBar.BarBorder.Color = wasmModule.Color.get_Red();
cf2.DataBar.BarColor = wasmModule.Color.get_GreenYellow();
```

--------------------------------

### Excel Find and Replace Data in JavaScript

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Provides a JavaScript example for finding specific text within an Excel sheet and replacing it with new text. It also demonstrates how to highlight the cells containing the found text.

```javascript
// Get the first worksheet
let worksheet = workbook.Worksheets.get(0);

// Find the "Area" string
let ranges = worksheet.FindAllString("Area", false, false);

// Traverse the found ranges
for (let range of ranges) {
  // Replace it with "Area Code"
  range.Text = "Area Code";
  // Highlight the color
  range.Style.Color = wasmModule.Color.get_Yellow();
}
```

--------------------------------

### Create Pyramid Column Chart

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Illustrates how to create a 3D pyramid column chart in an Excel worksheet. This example covers setting the chart type, data range, position, title, and axis labels.

```javascript
let chart = sheet.Charts.Add();
chart.DataRange = sheet.Range.get("B2:B5");
chart.SeriesDataFromRange = false;
chart.LeftColumn = 1;
chart.TopRow = 6;
chart.RightColumn = 11;
chart.BottomRow = 29;
chart.ChartType = wasmModule.ExcelChartType.Pyramid3DClustered;
chart.ChartTitle = "Sales by year";
chart.ChartTitleArea.IsBold = true;
chart.ChartTitleArea.Size = 12;
chart.PrimaryCategoryAxis.Title = "Year";
chart.PrimaryCategoryAxis.Font.IsBold = true;
chart.PrimaryCategoryAxis.TitleArea.IsBold = true;
chart.PrimaryValueAxis.Title = "Sales(in Dollars)";
chart.PrimaryValueAxis.HasMajorGridLines = false;
chart.PrimaryValueAxis.MinValue = 1000;
chart.PrimaryValueAxis.TitleArea.IsBold = true;
chart.PrimaryValueAxis.TitleArea.TextRotationAngle = 90;
let cs = chart.Series.get(0);
cs.CategoryLabels = sheet.Range.get("A2:A5");
cs.Format.Options.IsVaryColor = true;
```

--------------------------------

### Create Excel 'Hello World' File

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This example demonstrates the creation of a basic Excel file. It creates a new workbook, adds a worksheet named 'MySheet', sets the text 'Hello World' in cell A1, auto-fits the column, and saves the file.

```javascript
// Create a new workbook
const workbook = wasmModule.Workbook.Create();

// Clear default worksheets
workbook.Worksheets.Clear();

// Add a new worksheet named "MySheet"
const sheet = workbook.Worksheets.Add("MySheet");

// Set text for the "A1" range
sheet.Range.get("A1").Text = "Hello World";

// Set the column width to auto fit
sheet.Range.get("A1").AutoFitColumns();

// Save the workbook to the specified path
workbook.SaveToFile({fileName: 'HelloWorld.xlsx', version: wasmModule.ExcelVersion.Version2010});
```

--------------------------------

### Count Cells in Worksheet

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Provides a simple example of how to get the total number of cells present in an Excel worksheet using the Spire.XLS for JavaScript library.

```javascript
let sheet = workbook.Worksheets.get(0);
let cellCount = sheet.Cells.Count;
```

--------------------------------

### Filter Excel Cells by String

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This example shows how to apply a custom filter to an Excel worksheet to display cells starting with a specific string. It sets the filter range, defines the custom filter criteria, and applies the filter.

```javascript
let sheet = workbook.Worksheets.get(0);

sheet.AutoFilters.Range = sheet.Range.get("D1:D19");
let filterColumn = sheet.AutoFilters.get(0);
let strCrt = "South*";
sheet.AutoFilters.CustomFilter({column:filterColumn, operatorType:wasmModule.FilterOperatorType.Equal, criteria:wasmModule.String.Create(strCrt)});
sheet.AutoFilters.Filter();
```

--------------------------------

### Convert HTML to Excel using Spire.XLS for JavaScript

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Provides a JavaScript example for converting an HTML file into an Excel format using Spire.XLS. It includes fetching the HTML file into the virtual file system, creating a workbook, loading the HTML content, saving it as an Excel file, and cleaning up resources.

```javascript
let inputFileName='HtmlToExcel.html';
await wasmModule.FetchFileToVFS(inputFileName, '', '');
const workbook = wasmModule.Workbook.Create();
workbook.LoadFromHtml({fileName: inputFileName});
const outputFileName = 'HtmlToExcel-out.xlsx';
workbook.SaveToFile({fileName:outputFileName,version:wasmModule.ExcelVersion.Version2010});
workbook.Dispose();
```

--------------------------------

### Apply Conditional Formatting to Excel Cell Range

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Demonstrates how to apply conditional formatting rules to a range of cells in Excel using Spire.XLS for JavaScript. It includes examples for 'Greater Than' and 'Less Than' conditions with custom font and background colors.

```javascript
//Create conditional formatting rule.
const xcfs1 = sheet.ConditionalFormats.Add();
xcfs1.AddRange(sheet.AllocatedRange);
const format1 = xcfs1.AddCondition();
format1.FormatType = wasmModule.ConditionalFormatType.CellValue;
format1.FirstFormula = "800";
format1.Operator = wasmModule.ComparisonOperatorType.Greater;
format1.FontColor = wasmModule.Color.get_Red();
format1.BackColor = wasmModule.Color.get_LightSalmon();

//Create conditional formatting rule.
const xcfs2 = sheet.ConditionalFormats.Add();
xcfs2.AddRange(sheet.AllocatedRange);
const format2 = xcfs1.AddCondition();
format2.FormatType = wasmModule.ConditionalFormatType.CellValue;
format2.FirstFormula = "300";
format2.Operator = wasmModule.ComparisonOperatorType.Less;
format2.FontColor = wasmModule.Color.get_Green();
format2.BackColor = wasmModule.Color.get_LightBlue();
```

--------------------------------

### Format Table Styles and Settings in Excel

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Demonstrates how to apply built-in table styles, display total rows, set calculation types for columns, and show table style row/column stripes using Spire.XLS for JavaScript.

```javascript
let sheet = workbook.Worksheets.get(0);

// Add Default Style to the table
sheet.ListObjects.get(0).BuiltInTableStyle = wasmModule.TableBuiltInStyles.TableStyleMedium9;

// Show Total
sheet.ListObjects.get(0).DisplayTotalRow = true;

// Set calculation type
sheet.ListObjects.get(0).Columns.get(0).TotalsRowLabel = "Total";
sheet.ListObjects.get(0).Columns.get(1).TotalsCalculation = wasmModule.ExcelTotalsCalculation.None;
sheet.ListObjects.get(0).Columns.get(2).TotalsCalculation = wasmModule.ExcelTotalsCalculation.None;
sheet.ListObjects.get(0).Columns.get(3).TotalsCalculation = wasmModule.ExcelTotalsCalculation.Sum;
sheet.ListObjects.get(0).Columns.get(4).TotalsCalculation = wasmModule.ExcelTotalsCalculation.Sum;

// Show table style row stripes and column stripes
sheet.ListObjects.get(0).ShowTableStyleRowStripes = true;
sheet.ListObjects.get(0).ShowTableStyleColumnStripes = true;
```

--------------------------------

### Create Excel File in JavaScript

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/README.md

Demonstrates how to create a new Excel workbook, add a worksheet, set cell values, autofit columns, and save the file as an .xlsx. It also shows how to download the generated file.

```Vue.js
<template>
  <span>Click the following button to create my first Excel</span>
  <el-button @click="startProcessing">Start</el-button>
  <a v-if="downloadUrl" :href="downloadUrl" :download="downloadName">
    Click here to download the generated file
  </a>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const downloadUrl = ref(null);
    const downloadName = ref("");

    const startProcessing = async () => {
      wasmModule = window.wasmModule;
      if (wasmModule) {
        // Load the ARIALUNI.TTF font file into the virtual file system (VFS)
        await wasmModule.FetchFileToVFS('ARIALUNI.TTF', '/Library/Fonts/', `${import.meta.env.BASE_URL}static/font/`);

        // Create a new workbook
        const workbook = wasmModule.Workbook.Create();

        // Clear default worksheets
        workbook.Worksheets.Clear();

        // Add a new worksheet named "MySheet"
        const sheet = workbook.Worksheets.Add("MySheet");

        // Set text for the "A1" range
        sheet.Range.get("A1").Text = "Hello World";

        // Set the column width to auto fit
        sheet.Range.get("A1").AutoFitColumns();

        // Define the output file name 
        const outputFileName = 'HelloWorld.xlsx';

        // Save the workbook to the specified path
        workbook.SaveToFile({fileName: outputFileName, version: wasmModule.ExcelVersion.Version2010});

        // Read the saved file and convert to a Blob object
        const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
        const modifiedFile = new Blob([modifiedFileArray], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});

        // Download the file
        downloadName.value = outputFileName;
        downloadUrl.value = URL.createObjectURL(modifiedFile);
        
        // Clean up resources
        workbook.Dispose();
      }
    };

    return {
      startProcessing,
      downloadName,
      downloadUrl
    };
  }
};
</script>
```

--------------------------------

### Get Worksheet of a Chart

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This code explains how to obtain the worksheet object associated with a specific chart in an Excel workbook. It retrieves the chart and then accesses its Worksheet property to get the parent worksheet.

```javascript
// Access first worksheet of the workbook
let worksheet = workbook.Worksheets.get(0);

// Access the first chart inside this worksheet
let chart = worksheet.Charts.get(0);

// Get its worksheet
let obj = chart.Worksheet;
let wSheet = wasmModule.Worksheet.Convert(obj);

// Set string format for displaying
let result = `Sheet Name: ${worksheet.Name}\r\nCharts' sheet Name: ${wSheet.Name}`;
```

--------------------------------

### Load and Save ET and ETT Files using Spire.XLS for JavaScript

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Demonstrates the process of loading an existing ET (Excel Template) file and saving it in the same ET format using Spire.XLS for JavaScript. This involves fetching the file, creating a workbook, loading the file, saving it with the correct format, and disposing of the workbook.

```javascript
wasmModule = window.wasmModule;
if (wasmModule) {
  let inputFileName='LoadSaveEtAndETT.et';
  await wasmModule.FetchFileToVFS(inputFileName, '', `${import.meta.env.BASE_URL}static/data/`);
  const workbook = wasmModule.Workbook.Create();
  workbook.LoadFromFile({fileName: inputFileName});
  const outputFileName = 'LoadSaveEtAndETT-out.et';
  workbook.SaveToFile({fileName:outputFileName, fileFormat: wasmModule.FileFormat.ET});
  workbook.Dispose();
}
```

--------------------------------

### Get TextBox by Name in Worksheet

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Shows how to add a textbox to an Excel worksheet, set its name, and then retrieve it by its name using Spire.XLS for JavaScript. It also demonstrates how to get the text content of the retrieved textbox.

```javascript
//Insert a TextBox
sheet.Range.get("A2").Text = "Name：";
let textBox = sheet.TextBoxes.AddTextBox(2, 2, 18, 65);

//Set the name
textBox.Name = "FirstTextBox";

//Set string text for TextBox
textBox.Text =
  "Spire.XLS for .NET is a professional Excel .NET component that can be used to any type of .NET 2.0, 3.5, 4.0 or 4.5 framework application, both ASP.NET web sites and Windows Forms application.";

//Get the TextBox by the name
let FindTextBox = sheet.TextBoxes.get("FirstTextBox");

//Get the TextBox text
let text = FindTextBox.Text;
```

--------------------------------

### JavaScript: Create and Apply Cell Styles in Excel

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Demonstrates how to create a workbook, add a worksheet, access cells, create a style object, set various style properties (alignment, font color, borders, shrink to fit), and apply the style to multiple cells using Spire.XLS for JavaScript.

```javascript
const workbook = wasmModule.Workbook.Create();
const sheet = workbook.Worksheets.Add("new sheet");
const cell = sheet.Range.get("B1");
cell.Text = "Hello Spire!";
const style = workbook.Styles.Add("newStyle");
style.VerticalAlignment = wasmModule.VerticalAlignType.Center;
style.HorizontalAlignment = wasmModule.HorizontalAlignType.Center;
style.Font.Color = wasmModule.Color.get_Blue();
style.ShrinkToFit = true;
style.Borders.get(wasmModule.BordersLineType.EdgeBottom).Color = wasmModule.Color.get_GreenYellow();
style.Borders.get(wasmModule.BordersLineType.EdgeBottom).LineStyle = wasmModule.LineStyleType.Medium;
cell.Style = style;
sheet.Range.get("B4").Style = style;
sheet.Range.get("B4").Text = "Test";
sheet.Range.get("C3").CellStyleName = style.Name;
sheet.Range.get("C3").Text = "Welcome to use Spire.XLS";
sheet.Range.get("D4").Style = style;
```

--------------------------------

### Get Named Range Address in Excel

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This snippet retrieves and displays the address of a specific named range within an Excel workbook. It accesses the named range by its index and then gets its cell range address.

```javascript
// Create a new workbook
const book = wasmModule.Workbook.Create();
book.LoadFromFile({
  fileName: excelFileName,
  version: wasmModule.ExcelVersion.Version2010,
});

// Get specific named range by index
let NamedRange = book.NameRanges.get(0);

// Get the address of the named range
let address = NamedRange.RefersToRange.RangeAddress;

// Store the result
let sb = [];
sb.push(
  `The address of the named range ${NamedRange.Name} is ${address}`
);
```

--------------------------------

### Get Category Labels from Chart

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This code snippet shows how to retrieve the category labels associated with a chart in an Excel worksheet. It accesses the chart's primary category axis and iterates through its cells to get the values.

```javascript
//Create a workbook
workbook.LoadFromFile(excelFileName);

// Get the first worksheet
let sheet = workbook.Worksheets.get(0);

//Get the chart
let chart = sheet.Charts.get(0);

//Get the cell range of the category labels
let cr = chart.PrimaryCategoryAxis.CategoryLabels;
for (let i = 0; i < cr.Count; i++) {
    sb.push(cr.Cells.get(i).Value);
}
```

--------------------------------

### Implement Array R1C1 Formulas in Excel with JavaScript

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This example demonstrates the implementation of array R1C1 formulas in Excel using JavaScript. It covers setting up a workbook, populating cells with data, adding a label for the formula result, writing an array R1C1 formula, and calculating all formulas.

```javascript
// Create a workbook
const workbook = wasmModule.Workbook.Create();

// Get the first sheet
const sheet = workbook.Worksheets.get(0);

// Add data to cells
sheet.Range.get("A1").NumberValue = 1;
sheet.Range.get("A2").NumberValue = 2;
sheet.Range.get("A3").NumberValue = 3;
sheet.Range.get("B1").NumberValue = 4;
sheet.Range.get("B2").NumberValue = 5;
sheet.Range.get("B3").NumberValue = 6;
sheet.Range.get("C1").NumberValue = 7;
sheet.Range.get("C2").NumberValue = 8;
sheet.Range.get("C3").NumberValue = 9;

// Add label for the formula result
sheet.Range.get("B4").Text = "Sum:";
sheet.Range.get("B4").Style.HorizontalAlignment = wasmModule.HorizontalAlignType.Right;

// Write array R1C1 formula
sheet.Range.get("C4").FormulaArrayR1C1 = "=SUM(R[-3]C[-2]:R[-1]C)";

// Calculate formulas
workbook.CalculateAllValue();
```

--------------------------------

### Get Cropped Position of Picture

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Explains how to retrieve the cropped dimensions (left, top, width, height) of a picture located in an Excel worksheet using Spire.XLS for JavaScript. It accesses the picture object and its properties to get these values.

```javascript
let sheet1 = workbook.Worksheets.get(0);
let picture = sheet1.Pictures.get(0);
let left = picture.Left;
let top = picture.Top;
let width = picture.Width;
let height = picture.Height;
let displayString = `Crop position: Left ${left}\r\nCrop position: Top ${top}\r\nCrop position: Width ${width}\r\nCrop position: Height ${height}`;
```

--------------------------------

### Create and Apply Predefined Styles to Excel Cells

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Illustrates the process of creating a custom style with specific font properties and applying it to an Excel cell using Spire.XLS for JavaScript.

```javascript
// Create a workbook
const workbook = wasmModule.Workbook.Create();

// Get the first sheet
const sheet = workbook.Worksheets.get(0);

// Create a new style
const style = workbook.Styles.Add("newStyle");
style.Font.FontName = "Calibri";
style.Font.IsBold = true;
style.Font.Size = 15;
style.Font.Color = wasmModule.Color.get_CornflowerBlue();

// Get "B5" cell
const range = sheet.Range.get("B5");
range.Text = "Welcome to use Spire.XLS";
range.CellStyleName = style.Name;
range.AutoFitColumns();
```

--------------------------------

### Get Excel File Version

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Explains how to retrieve the Excel file version using Spire.XLS for JavaScript. It involves loading a workbook with a specified Excel version and then accessing the Version property to get the file's version information.

```javascript
// Create a new workbook
const book = wasmModule.Workbook.Create();
book.LoadFromFile({
  fileName: excelFileName,
  version: wasmModule.ExcelVersion.Version2010,
});

// Get the version
let version = book.Version;
```

--------------------------------

### Get Excel Cell Address and Related Information

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This code retrieves various address-related information for an Excel cell range. It demonstrates getting the local address, cell count, entire column address, and entire row address for a given range.

```javascript
const workbook = wasmModule.Workbook.Create();
let sheet = workbook.Worksheets.get(0);
let builder = [];
let range = sheet.Range.get("A1:B5");
let address = range.RangeAddressLocal;
builder.push(`Address of range: ${address}`);
let count = range.CellsCount;
builder.push(`Cell count of range: ${count}`);
let entireColAddress = range.EntireColumn.RangeAddressLocal;
builder.push(
  `Address of entire column of the range: ${entireColAddress}`
);
let entireRowAddress = range.EntireRow.RangeAddressLocal;
builder.push(`Address of entire row of the range ${entireRowAddress}`);
let content = builder.join("\n");
workbook.Dispose();
```

--------------------------------

### Format an Excel Column with Custom Style Properties

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This example shows how to format an entire Excel column with custom style properties, including text alignment, font color, shrink-to-fit, and borders. It demonstrates creating a style and applying it to a column.

```javascript
//Create a workbook
const workbook = wasmModule.Workbook.Create();

//Get the first sheet
const sheet = workbook.Worksheets.get(0);

//Create a new style
const style = workbook.Styles.Add("newStyle");

//Set the vertical alignment of the text
style.VerticalAlignment = wasmModule.VerticalAlignType.Center;

//Set the horizontal alignment of the text
style.HorizontalAlignment = wasmModule.HorizontalAlignType.Center;

//Set the font color of the text
style.Font.Color = wasmModule.Color.get_Blue();

//Shrink the text to fit in the cell
style.ShrinkToFit = true;

//Set the bottom border color of the cell to OrangeRed
style.Borders.get(wasmModule.BordersLineType.EdgeBottom).Color = wasmModule.Color.get_OrangeRed();

//Set the bottom border type of the cell to Dotted
style.Borders.get(wasmModule.BordersLineType.EdgeBottom).LineStyle = wasmModule.LineStyleType.Dotted;

//Apply the style to the first column
sheet.Columns.get(0).CellStyleName = style.Name;

sheet.Columns.get(0).Text = "Test";
```

--------------------------------

### Create Gauge Chart using Doughnut and Pie Chart Combination

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This example demonstrates how to create a gauge chart by combining a doughnut chart and a pie chart. It involves setting chart properties, formatting the doughnut hole size and first slice angle, setting colors for data points, and configuring a pie series to act as a pointer.

```javascript
//Add a Doughnut chart
let chart = sheet.Charts.Add({chartType:wasmModule.ExcelChartType.Doughnut});
chart.DataRange = sheet.Range.get("A1:A5");
chart.SeriesDataFromRange = false;
chart.HasLegend = true;

//Set the position of chart
chart.LeftColumn = 2;
chart.TopRow = 7;
chart.RightColumn = 9;
chart.BottomRow = 25;

//Get the series 1
let cs1 = chart.Series.get({name:"Value"});
cs1.Format.Options.DoughnutHoleSize = 60;
cs1.DataFormat.Options.FirstSliceAngle = 270;

//Set the fill color
cs1.DataPoints.get(0).DataFormat.Fill.ForeColor = wasmModule.Color.get_Yellow();
cs1.DataPoints.get(1).DataFormat.Fill.ForeColor = wasmModule.Color.get_PaleVioletRed
cs1.DataPoints.get(2).DataFormat.Fill.ForeColor = wasmModule.Color.get_DarkViolet();
cs1.DataPoints.get(3).DataFormat.Fill.Visible = false;

//Add a series with pie chart
let cs2 = chart.Series.Add({name:"Pointer", serieType:wasmModule.ExcelChartType.Pie});

//Set the value
cs2.Values = sheet.Range.get("D2:D4");
cs2.UsePrimaryAxis = false;
cs2.DataPoints.get(0).DataLabels.HasValue = true;
cs2.DataFormat.Options.FirstSliceAngle = 270;
cs2.DataPoints.get(0).DataFormat.Fill.Visible = false;
cs2.DataPoints.get(1).DataFormat.Fill.FillType = wasmModule.ShapeFillType.SolidColor;
cs2.DataPoints.get(1).DataFormat.Fill.ForeColor = wasmModule.Color.get_Black();
cs2.DataPoints.get(2).DataFormat.Fill.Visible = false;
```

--------------------------------

### Create Table

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Illustrates how to create a table in an Excel worksheet using JavaScript. It involves using the `ListObjects.Create` method to define the table name and range, and then applying a built-in style.

```javascript
sheet.ListObjects.Create(
  "table",
  sheet.Range.get({ row: 1, column: 1, lastRow: 19, lastColumn: 5 })
);
sheet.ListObjects.get(0).BuiltInTableStyle = wasmModule.TableBuiltInStyles.TableStyleLight9;
```

--------------------------------

### Remove Chart from Worksheet

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Shows how to remove a chart from an Excel worksheet using Spire.XLS for JavaScript. It involves getting the chart object and calling its `Remove()` method.

```javascript
let sheet = workbook.Worksheets.get(0);
let chart = sheet.Charts.get(0);
chart.Remove();
```

--------------------------------

### Demonstrate Excel Number Formatting Options

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Illustrates various number formatting techniques for Excel cells using Spire.XLS JavaScript API. It covers formats like '0', '0.00', '#,##0.00', currency, negative number formatting, scientific notation, and percentages.

```javascript
sheet.Range.get("B10").Text = "NUMBER FORMATTING";
sheet.Range.get("B10").Style.Font.IsBold = true;

sheet.Range.get("B13").Text = "0";
sheet.Range.get("C13").NumberValue = 1234.5678;
sheet.Range.get("C13").NumberFormat = "0";

sheet.Range.get("B14").Text = "0.00";
sheet.Range.get("C14").NumberValue = 1234.5678;
sheet.Range.get("C14").NumberFormat = "0.00";

sheet.Range.get("B15").Text = "#,##0.00";
sheet.Range.get("C15").NumberValue = 1234.5678;
sheet.Range.get("C15").NumberFormat = "#,##0.00";

sheet.Range.get("B16").Text = "$#,##0.00";
sheet.Range.get("C16").NumberValue = 1234.5678;
sheet.Range.get("C16").NumberFormat = "$#,##0.00";

sheet.Range.get("B17").Text = "0;[Red]-0";
sheet.Range.get("C17").NumberValue = -1234.5678;
sheet.Range.get("C17").NumberFormat = "0;[Red]-0";

sheet.Range.get("B18").Text = "0.00;[Red]-0.00";
sheet.Range.get("C18").NumberValue = -1234.5678;
sheet.Range.get("C18").NumberFormat = "0.00;[Red]-0.00";

sheet.Range.get("B19").Text = "#,##0;[Red]-#,##0";
sheet.Range.get("C19").NumberValue = -1234.5678;
sheet.Range.get("C19").NumberFormat = "#,##0;[Red]-#,##0";

sheet.Range.get("B20").Text = "#,##0.00;[Red]-#,##0.00";
sheet.Range.get("C20").NumberValue = -1234.5678;
sheet.Range.get("C20").NumberFormat = "#,##0.00;[Red]-#,##0.00";

sheet.Range.get("B21").Text = "0.00E+00";
sheet.Range.get("C21").NumberValue = 1234.5678;
sheet.Range.get("C21").NumberFormat = "0.00E+00";

sheet.Range.get("B22").Text = "0.00%";
sheet.Range.get("C22").NumberValue = 1234.5678;
sheet.Range.get("C22").NumberFormat = "0.00%";

sheet.Range.get("B13:B22").Style.KnownColor = wasmModule.ExcelColors.Gray25Percent;

// AutoFit Column
sheet.AutoFitColumn(2);
sheet.AutoFitColumn(3);
```

--------------------------------

### Accept or Reject Tracked Changes in Excel

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This snippet demonstrates how to load an Excel file and then either accept or reject all tracked changes within the workbook using the Spire.XLS library for JavaScript. It requires the Spire.XLS library to be initialized.

```javascript
const book = wasmModule.Workbook.Create();        
book.LoadFromFile(excelFileName);

// Accept the changes or reject the changes
// workbook.AcceptAllTrackedChanges();
book.RejectAllTrackedChanges();
```

--------------------------------

### Get Default Row and Column Count

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Explains how to retrieve the default row and column counts of a newly created or empty Excel worksheet using Spire.XLS for JavaScript.

```javascript
//Create a workbook
let workbook = spirexls.Workbook.Create();

//Clear all worksheets
workbook.Worksheets.Clear();

//Create a new worksheet
let sheet = workbook.CreateEmptySheet();
let sb = [];

//Get row and column count
let rowCount = sheet.Rows.Count;
let columnCount = sheet.Columns.Count;
sb.push(`The default row count is :${rowCount}`);
sb.push(`The default column count is :${columnCount}`);
```

--------------------------------

### Read Excel from Stream

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Demonstrates how to load an Excel workbook from a stream using Spire.XLS for JavaScript.

```javascript
//Create a workbook and load a file
const workbook = wasmModule.Workbook.Create();

// Open excel from a stream
let fileStream = wasmModule.Stream.CreateByFile(excelFileName);
workbook.LoadFromStream(fileStream);
```

--------------------------------

### Set Default Column Width

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This example demonstrates setting the default column width for an entire Excel worksheet. After setting the default width, the workbook is saved and then disposed.

```javascript
let sheet = workbook.Worksheets.get(0);
sheet.DefaultColumnWidth = 25;
workbook.SaveToFile({fileName: outputFileName, version:wasmModule.ExcelVersion.Version2010});
workbook.Dispose();
```

--------------------------------

### Create Pareto Chart in Excel

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This example demonstrates the creation of a Pareto chart in Excel using Spire.XLS for JavaScript. It covers setting the chart type to Pareto, defining the data range, configuring axis binning, overflow/underflow values, Pareto line formatting, gap width, and the chart title.

```javascript
//Add chart
let officeChart = sheet.Charts.Add();
//Set chart type as Pareto
officeChart.ChartType = wasmModule.ExcelChartType.Pareto;

//Set data range in the worksheet
officeChart.DataRange = sheet.Range.get("A2:B8");

officeChart.TopRow = 1;
officeChart.BottomRow = 19;
officeChart.LeftColumn = 4;
officeChart.RightColumn = 12;
officeChart.PrimaryCategoryAxis.IsBinningByCategory = true;

officeChart.PrimaryCategoryAxis.OverflowBinValue = 5;
officeChart.PrimaryCategoryAxis.UnderflowBinValue = 1;

//Formatting Pareto line
officeChart.Series.get(0).ParetoLineFormat.LineProperties.Color = wasmModule.Color.get_Blue();

//Gap width settings
officeChart.Series.get(0).DataFormat.Options.GapWidth = 6;

//Set the chart title
officeChart.ChartTitle = "Expenses";
```

--------------------------------

### Add Label Control to Excel Worksheet

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

This example demonstrates how to add a label control to an Excel worksheet. It specifies the position and size of the label and sets its text content.

```javascript
// Add a label control
let label = sheet.LabelShapes.AddLabel(10, 2, 30, 200);
label.Text = "This is a Label Control";
```

--------------------------------

### Convert Excel to PostScript

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Demonstrates how to load an Excel file and save it to PostScript format using Spire.XLS for JavaScript. It includes creating a workbook, loading a file, saving to PostScript, and disposing of the workbook object.

```javascript
const workbook = wasmModule.Workbook.Create();
workbook.LoadFromFile({fileName: inputFileName});

const outputFileName = 'ToPostScript-out.ps';
workbook.SaveToFile({fileName:outputFileName, fileFormat:wasmModule.FileFormat.PostScript});
workbook.Dispose();
```

--------------------------------

### Get Paper Size of Worksheets

Source: https://github.com/eiceblue/spire.xls-for-javascript/blob/main/JavaScript Examples/xls_vue.md

Demonstrates how to retrieve the paper width and height for each worksheet in an Excel workbook using Spire.XLS for JavaScript. It iterates through the worksheets and accesses their `PageSetup` properties.

```javascript
let sb = [];
for (let i = 0; i < workbook.Worksheets.Count; i++) {
  let sheet = workbook.Worksheets.get(i);
  let width = sheet.PageSetup.PageWidth;
  let height = sheet.PageSetup.PageHeight;
  sb.push(sheet.Name);
  sb.push(`Width: ${width}\tHeight: ${height}\r\n`);
}
```