Create Excel File and Apply Table Style Using Open Xml in C# .Net

Create Excel File and Apply Table Style Using Open Xml  in C# and Angular

In the Open XML SDK used for creating Excel file in visual studio, in here we are talk about how to create excel file in using Open Xml SDK and apply Table style for excel table

Available Table Styles

Create Excel File and Apply Table Style Using Open Xml in C# .Net

Example: Create Excel File and Apply Table Style Using Open Xml in C# .Net

.net Namespaces

Add EPPlus Nuget Package 

using OfficeOpenXml;

using System.Reflection;

using OfficeOpenXml.Table;

using OfficeOpenXml.Style;

Create Excel File

using (ExcelPackage exPack = newExcelPackage())

{

       ExcelWorksheet ws = exPack.Workbook.Worksheets.Add(“SheetName”);

       intsRow = 1;

       int sCol = 1;

       int eRow = sRow;

       int eCol = sCol + tblTable.Columns.Count + 3;

ws.Cells[sRow, eCol + 2].LoadFromDataTable(tblTable, true, TableStyles.Light17);

ws.Cells[sRow, eCol + 2, sRow, eCol + 2 + tblTable.Columns.Count –

       1].Style.Font.Bold = true;

       ws.Cells[sRow, eCol + 4, sRow + tblTable.Rows.Count + 2, eCol +

              4].Style.Numberformat.Format = "0.00";

       ws.Cells[sRow, eCol + 4, sRow + tblTable.Rows.Count + 2, eCol +

              4].Style.HorizontalAlignment = ExcelHorizontalAlignment.Right;

       ws.Cells[sRow + tblTable.Rows.Count + 2, eCol + 3].Value = "TOTAL";

       ws.Cells[sRow + tblTable.Rows.Count + 2, eCol + 4].Formula = "=SUM(" +

              ws.Cells[sRow + 1, eCol + 4].Address + ":"+ ws.Cells[sRow +

              tblTable.Rows.Count, eCol + 4].Address + ")";

       ws.Cells[sRow + tblTable.Rows.Count + 2, eCol + 4].Style.Numberformat.Format =

              "0.00";

       

       Open Excel File

       using (var memoryStream = new MemoryStream())

       {

   string fileName = "FileName.xls";

   byte[] bytes = exPack.GetAsByteArray();

   try

   {

using(MemoryStream ms = newMemoryStream(bytes))

{

  HttpResponseMessage httpResponseMessage = newHttpResponseMessage();

  httpResponseMessage.Content = newByteArrayContent(bytes);

  httpResponseMessage.Content.Headers.Add("x-filename", fileName);

  httpResponseMessage.Content.Headers.ContentType = new   

   MediaTypeHeaderValue("application/octet-stream");

         httpResponseMessage.Content.Headers.ContentDisposition = new

           ContentDispositionHeaderValue("attachment");

  httpResponseMessage.Content.Headers.ContentDisposition.FileName =

     fileName;

  httpResponseMessage.StatusCode = HttpStatusCode.OK;

  return httpResponseMessage;

              }

   }

   catch

   {

returnnewHttpResponseMessage(HttpStatusCode.InternalServerError);

   }

      }

}

Angular File

ExportToExcel(){

    this.reportService.getReportExcel(this.quoHed.numQuoID).subscribe(data=>{

      var filename = ‘filename.xls';

      var contentType = 'application/ms-excel';

      var linkElement = document.createElement('a');   

      var blob = new Blob([data], { type: contentType });

      var url =  window.URL.createObjectURL(blob);

      linkElement.setAttribute('href', url);

      linkElement.setAttribute("download", filename);

      var clickEvent = new MouseEvent("click", {

          "view": window,

          "bubbles": true,

          "cancelable": false

      });

      linkElement.dispatchEvent(clickEvent

    },()=>{

      this.toastr.error("An error occured while generation report!");

    });

  }

Change DIV tag class name in Type Script: Comprehensive Guide

To Change DIV tag class name in Type Script, you would typically access the DOM element representing the div and then modify its className property.

Understanding the Importance of Div Tag Class Names

Div tags serve as the building blocks of web layout and structure. Class names assigned to div tags play a crucial role in styling and organizing content. By modifying these class names dynamically, developers can achieve dynamic changes in the website’s appearance and behavior.

Change DIV tag class name in Type Script
Change DIV tag class name in Type Script

Step-by-Step Guide to Changing Div Tag Class Names in Type Script

  1. Identifying the Target Div Element: Before diving into TypeScript, pinpoint the div element whose class name needs modification. Utilize CSS selectors or JavaScript DOM manipulation methods to locate the target div accurately.
  2. Accessing the Div Element in TypeScript: Once the target div is identified, access it within your TypeScript code using appropriate DOM traversal techniques. You can utilize methods like document.getElementById() or document.querySelector() to retrieve the div element.
  3. Updating the Class Name: With the div element accessible, proceed to update its class name property. In TypeScript, you can directly manipulate the class name by assigning a new value to element.className property. Alternatively, you can use element.classList methods like add(), remove(), or toggle() for more sophisticated class manipulation.
  4. Implementing Dynamic Class Name Changes: To make class name changes dynamic, incorporate conditional logic or event listeners in your TypeScript code. For instance, you can change the class name based on user interactions, form submissions, or backend data retrieval.
  5. Testing and Debugging: After implementing the class name changes, thoroughly test your website to ensure proper functionality across different browsers and devices. Debug any issues that may arise during testing to deliver a seamless user experience.

How to Change DIV tag class name in Type Script

The HTML CSS className property sets an element

var divNameClass = document.getElementById("divName”) as HTMLDivElement;

divNameClass.className = "CCS Class Name";

Best Practices for Modifying Div Tag Class Names

  • Use Descriptive Class Names: Opt for meaningful and descriptive class names that accurately reflect the content or functionality of the associated div elements. This enhances code readability and maintainability.
  • Avoid Inline Styles: Instead of inline styles, leverage CSS classes for styling purposes. This promotes separation of concerns and simplifies code management.
  • Utilize CSS Preprocessors: Consider using CSS preprocessors like Sass or Less to streamline CSS development and facilitate class name management through variables and mixins.
  • Regularly Review and Refactor: Periodically review your codebase to identify opportunities for optimization and refactoring. This ensures code efficiency and scalability in the long run.

Conclusion

By mastering the art of changing div tag class names in TypeScript, you can unlock endless possibilities for enhancing your website’s aesthetics and functionality. Follow the step-by-step guide and best practices outlined in this article to seamlessly integrate dynamic class name changes into your web development workflow. Happy coding!