js实现把CSS样式全部转换成行内样式

在做前端页面导出成word文档这个功能的时候，发现只能带入行内样式。
脑洞大开的用以下方法实现css转化成行内样式。
基于页面渲染成功后，document的styleSheets对象，便写了如下方法

//根据容器ID来渲染行内样式，避免长时间卡顿
let translateStyle = contentId => {
      const sheets = document.styleSheets;
      const sheetsArry = Array.from(sheets);
      const $content = $('#' + contentId);
      sheetsArry.forEach(sheetContent => {
        const { rules, cssRules } = sheetContent;
        //cssRules兼容火狐
        const rulesArry = Array.from(rules || cssRules || []);
        rulesArry.forEach( rule => {
          const { selectorText, style, styleMap } = rule;
          //全局样式不处理
          if (selectorText !== '*') {
            //兼容某些样式在转换的时候会报错
            try {
              const select = $content.find(selectorText);
              select.each( domIndex => {
                const dom = select[domIndex];
                let i = 0;
                const domStyle = window.getComputedStyle(dom, null)
                while (style[i]) {
                  //样式表里的className是驼峰式，转换下便对应上了
                  const newName = style[i].replace(/-\w/g, function(x){
                    return x.slice(1).toUpperCase();
                  });
                  $(dom).css(style[i], domStyle[newName]);
                  i++;
                }
              })
            } catch (e) {
              console.log('转换成行内样式失败');
            }
          }
        })
      })
    }

好了，大功告成，看看效果

转换成行内样式后.png