How to Export Html Table to Excel with CSS

Download Source Code

To export your table data (or) a list into excel workbook, there are several options to export like, we can use Microsoft.Office.Interop library or something else. But in this tutorial i want to show you the simplest way to export the Html Table to Excel with Inline CSS applied using very few lines of code.

  • Here the Excel creates a file that contains the Html and XML tags which is also called as Html/XML Hybrid. When a WorkBook saved in the following format with Html and XML tags, it can go from Excel to the Browser and back form Browser to Excel again without loosing any information.

Step 1:  Create a simple html code as following. Here we can create ‘N’ number of WorkSheets in a WorkBook.

  • From the above code X:Name  in the X:ExcelWorkSheet is the name of the sheet in the Excel.
  • And we can specify the required options to the WorkSheet with in <x:WorksheetOptions>. Here are the few more <X:WorkSheetOptions>
    •   <x:Selected/>   

    • <x:DoNotDisplayGridlines/>   

    • <x:ProtectContents>False</x:ProtectContents>   

    • <x:ProtectObjects>False</x:ProtectObjects>   

    • <x:ProtectScenarios>False</x:ProtectScenarios>

  • And the If condition <!–[if gte mso 9]> is used to check whether you have Microsoft Office or not. It’s really necessary to check this.

Step 2: Create a Html table with inline Css in the <body>

 

Step 3: Add the following Script in the <head>.

  • function (table, name) { … } is the function which is accepting the two parameters,
    • one is the Id of the table.
    • other is the name of the X:ExcelWorkSheet. 
  • template: It is just a string which is constructed with Html/XML hybrid.
  • base64 = function(s) –> accepting the parameter of the format which is framed by using function format = function (s, c).
  • format = function (s, c) –> accepting two parameters,
    • One is the template with HTMl and XML tags.
    • Other is the ctx object which is framed with two properties { worksheet: ‘ ‘, table:’ ‘}

Step 4: Here is the total HTML page.

Output:

D3 tree with context menu on various levels

Download source code – D3 Tree using HTML

Download source code – D3 Tree Using Angular 2/4 

 

Step 1: Creating html file to display the D3 Tree

From the example given get the Javascript libraries and Stylessheets.

d3chart.html

Step 2: Sample data in json file

sampledata.json

Step 3: Modify the tree_collapsible.js to create new context menu

In the function treeCollapsible( ) do the following changes to create context menu for different levels.

  • After declaring d3Container variable,  create context menu as follows

  • After diagonal projection get Json file data using Ajax.
  • Now group names as per the levels. from the below code groupNames[] will have level 1 and memeberNames[] will have level 2.
  • And root node is assigned to the root variable as root = treeData[0];

Output:

 


How to use this D3 Tree in angular 2/4 ?This is the place where Typescript Ambients comes into picture.

What is Ambients ?

Ambient Declaration is the process of providing declarations for user javascript as well as for javascript third party libraries. Third party libraries can be either JQuery, AngularJS, Node JS, Require JS, Polymer JS etc.

  • Developer no need to rewrite the third party bundles. We can just make use of them in typescript with type-safe.
  • It enables Intellisense  feature for third party bundles of all the variables and its methods.
  • Ambient declarations will have an extension (.d.ts), where‘d’ denotes the declaration.                                         Ex: sample.jssample.d.ts
  • It’s not mandatory that declarations must be in a declaration file with extension (.d.ts) it can be either in (.ts / .d.ts), but it’s recommended to separate the declarations in a separate file.
  • If a file has the extension.d.ts then each root level definition must have the declare keyword prefixed to it, so that the programmer can make sure that declared items will exist at run time

Ex:

Step 1: Let’s Assume we have a javascript file sample.js

File: Sample.js

Now we need to modify this sample.js as follows

Step 2: Create declaration file for sample.js

File: sample.d.ts

Step 3: Provide reference of declaration file sample.d.ts in the component

 


Now similary we need to modify the file tree_collapsible.js from the above example.

Step 1: Modify the tree_collapsible.js. And change the path of the sampledata.json

Step 2: Creating declaration  file as follows tree_collapsible.d.ts

Step 3: Provide reference for declaration file in the component. We need to load the function with in ngAfterViewInit( ). 

Reason behind this is before initializing the component template if we load the function, D3 component would not be able to find the element that is required to draw SVG.

 

Step 4: Create template for Component

File: template.html

Step 5: Provide references of the required files for D3 Tree in the main HTML page.

File: src/Index.html

Note: You will get the same output. If not check if any errors in browser console window. Errors mostly will be file not found. If that is the issue please give the relevant path.