Make CSS Inline

Scenario

A client requested the ability to Copy/Paste the content of a report from the website to Word.

Background

The site in question was a compliance reporting website, where the information was being packaged together with other information to then be presented to the compliance agency.  This process occurred on a monthly, quarterly, and yearly basis.

The current process, required the compliance "packagers" to copy the report results to Word and then "format" the contents to look as close to the website rendered format.  This process would consume close to a day, maybe two, pending on how many reports needed to be packaged.

Problem

After review of the situation, i noticed that the problem was occurring only in IE (Internet Explorer) browsers but not Chrome.  Since this organization was a Microsoft house and IE was the supported browser, they required the fix to be IE compliant.

Once the problem was isolated to just IE, I started reviewing the behaviors of the Copy/Paste to identify the type of solution to put in place.  The behavior was consistent with the fact that IE does not interpret class attribute declarations to their style equivalent.

Example:

 <table class="report center-element">  

was not being interpreted as

 <table style="box-sizing: border-box; margin: 0px auto; padding: 10px;">  

Solution

After browsing my Old Faithful (Stack Overflow), there were a bunch of disparate solutions available but none that met the specific needs for this purpose.  So I started down the road of taking the various disparate solutions and cobbling together a solution for this specific problem.

The net result was an implementation that extended the JQuery library, to allow the solution to be executed from any HTML element being presented. Such as $(document).makeCSSInline(); or $("#id").makeCSSInline();

 if (window.jQuery) {  
      $.fn.extend({  
           /***  
            * Purpose: Take the parent element, function is called from, and converts  
            *          element class attribute declarations to style attribute declarations  
            */  
           makeCSSInline: function () {  
                // In the event there are multiple StyleSheets (page inline & reference), iterate over all of them  
                for (var idx = 0; idx < document.styleSheets.length; idx++) {  
                     var rules = document.styleSheets[idx].cssRules;  
                     var elems = [];     // Elements that have had Classes converted to Inline-Styles  
                     for (var idx = 0, len = rules.length; idx < len; idx++) {  
                          switch (rules[idx].type) {  
                               case CSSRule.MEDIA_RULE:  
                                    break;  
                               default:  
                                    // Default action to run for unhandled Rule Type  
                                    var decls = [];     //CSS Declarations Array  
                                    decls = rules[idx].selectorText.split(",");  
                                    decls.forEach(function (decl) {  
                                         $(decl).each(function (i, elem) {  
                                              elem.style.cssText += rules[idx].style.cssText;  
                                              elems.push($(elem));  
                                         });  
                                    });  
                          }  
                     }  
                }  
                // Iterate over all affected elements and remove the Class attribute  
                elems.forEach(function (el) {  
                     el.removeAttr('class');  
                });  
           }  
      });  
 }