Create Excel File Using HTML Tag in MVC Controller

In this article we are looking how to Create Excel File Using HTML Tag in MVC Controller

Adding HTML tabs to Excel files is a straightforward process that can be accomplished with minimal effort. Follow these simple steps to integrate HTML tabs into your Excel documents:

1. Prepare Your Excel File: Start by opening your Excel file and identifying the data that you want to organize using HTML tabs. Ensure that your data is structured in a way that lends itself well to tabbed navigation.
2. Generate HTML Code for Tabs: Next, generate the HTML code for the tabs that you want to add to your Excel file. You can use online resources or HTML editing software to create the necessary code for your tabs.
3. Insert HTML Code into Excel: Once you have generated the HTML code for your tabs, insert it into your Excel file. You can do this by opening the Excel file in a text editor and pasting the HTML code into the appropriate location.
4. Test and Refine: After inserting the HTML code, test your Excel file to ensure that the tabs function as intended. Make any necessary adjustments or refinements to the code to optimize the performance of your tabs.
5. Finalize and Save: Once you are satisfied with the functionality of your HTML tabs, save your Excel file to preserve the changes. Your Excel file is now equipped with HTML tabs for enhanced data organization and accessibility.

Example: Create Excel File Using HTML Tag in MVC Controller

MVC Controller
public ActionResult InlandRevTaxReturnReport(string mDateFrom, string mDateTo)
{


     try
            {
                var mReport = GetReportDebtorInvoice(DateFrom, DateTo);


                response.Message = getHTMLTabelHeder();
response.Message += "<table class='tblHeader'><tr><td colspan='7'>Local and Forieng Debtor Invoice From " + DateFrom.ToShortDateString() + " To " + DateTo.ToShortDateString() + " </td></tr></table></br>";
                response.Message += "<table class='tblData'><tr><th>Code</th><th>Name</th>                <th>Address</th><th>Inv Amount LKR</th><th>CCAmount LKR</th><th>Revenue LKR</th>              </tr>";


                foreach (var i in mReport)
                {
                    response.Message += "<td>" + i.numDebtorCode + "</td>";
                    response.Message += "<td>" + i.varDebCredName + "</td>";
                    response.Message += "<td>" + i.varDebCredAdd + "</td>";
                    response.Message += "<td>" + i.numInvAmountLKR.ToString("n2") + "</td>";
                    response.Message += "<td>" + i.numCCAmountLKR.ToString("n2") + "</td>";
                    response.Message += "<td>" + i.numRevenueLKR.ToString("n2") + "</td>                           </tr>";
                    intCurrRow += 1;
                }
                response.Message += "</table>";
            }
            catch
            {
                response.Success = false;
            }
            return Json(response);
}
 
 
 
Apply CSS Class
 
 
private string getHTMLTabelHeder()
        {
            return " <!-- CSS goes in the document HEAD or added to your external stylesheet                        --> " +
              "      <style type='text/css'> " +
              "      table.tblHeader { " +
              "            font-family: verdana,arial,sans-serif; " +
              "            font-size:16px; " +
              "            border-collapse: collapse; " +
              "      } " +
              "      table.tblHeader th { " +
              "            padding: 8px; " +
              "      } " +
              "      table.tblData { " +
              "            font-family: verdana,arial,sans-serif; " +
              "            font-size:11px; " +
              "            color:#333333; " +
              "            border-width: 1px; " +
              "            border-color: #999999; " +
              "            border-collapse: collapse; " +
              "      } " +
              "      table.tblData th { " +
              "            background-color:#c3dde0; " +
              "            border-width: 1px; " +
              "            padding: 8px; " +
              "            border-style: solid; " +
              "            border-color: #a9c6c9; " +
              "      } " +
              "      table.tblData td { " +
              "            border-width: 1px; " +
              "            padding: 8px;" +
              "            border-style: solid; " +
              "      } " +
              "      </style> ";


        }
 
 
MVC View




$.ajax({
                type: "POST",
                url: '@Url.Action("InlandRevTaxReturnReport", "ReportAccrualSummInv")',
                data: { mDateFrom: dteFrom.GetText(), mDateTo: dteTo.GetText()},
                beforeSend: function () {
                    loadingPanel.Show();
                },
                success: function (response) {
                    $("#divTableDataHolder").html(response.Message);
                    window.open('data:application/vnd.ms-excel,' +                  encodeURIComponent($('div[id$=divTableDataHolder]').html()));
                    $("#divTableDataHolder").html('');
                    loadingPanel.Hide();
                },
                error: function (xhr, errorType, exception) {
                    loadingPanel.Hide();
                }


            });
 

Conclusion

In conclusion, integrating Create Excel File Using HTML Tag offers a multitude of benefits, including streamlined data organization, improved accessibility, and enhanced user experience. By harnessing the power of HTML tabs, you can unlock new levels of efficiency and convenience in your data management endeavors. Start leveraging the synergy between Excel and HTML today to revolutionize the way you handle data.