How to get native DOM HTML element with computed styles as string?

Question

I have a requirement where i need to send the table(UI) as email, i've tried getting native HTML DOM element, by executing document.querySelector('table') which is without styles. Now, the email should look like UI but in my case i can see the UI without styles. I tried getting the computed styles by running this command window.getComputedStyle(document.querySelector('table')), which gives computed styles for 'table'.

Here's what i have

var obj={};// obj to send with REST API, obj.to="toEmail@abc.com", // recipient obj.body=document.querySelector('table') // which gives the native DOM HTML code without styles, I want HTML code along with styles.

Now, i know running getComputedStyle will get the current styles but how to execute them both and return whole thing(HTML code and styles) as string? any help is much appreciated.

My application is in angularjs 1.4

Answer 1

First of all email services block the major of css style for security reason, so you will have to do a lot of test before achieve a good solution, it is very improbable that the css style you use in browser will be accepted by them. The best solution is to put style directly on element tag with style attribute.

My suggestion is to find manually a working solution for your table, then to add programmatically your style to your table getted with document.querySelector('table')

Alternatively you could apply an XSL transformation, but i don't know if it is more simple.