javascript - 如何导出带有所有内联 CSS 的 HTML，就像浏览器在粘贴所选 HTML 时所做的那样

Question

如果我在页面中选择并复制样式精美的 HTML 表格(或任何其他元素)，然后将其粘贴到 Gmail 或 Outlook 撰写界面中的新电子邮件消息中，则通过样式内联保留样式。

示例:

我想通过 Javascript 触发 Chrome 为粘贴生成的样式内联 HTML，以生成用于生成格式化 XLS 或电子邮件的 HTML。

Answer 1

<支持>笔记:

• 版本 3* 由于误读问题
• 复制到剪贴板在 StackOverflow 片段中不起作用，请离线尝试

---

原始答案，使用 getComputedStyle()

我们可以使用getComputedStyle()获取元素的所有计算样式。

我们可以将其映射到内联 css 并使用 setAttribute

将其添加到 DOM

由于 getComputedStyle() 按字面意思返回所有 样式，因此不需要其中的大部分。我建议使用白名单样式。 (见下面的第二个片段)

小演示，按下按钮to copy the text .
所有的 div 样式都将是内联的，在那个巨大的列表中的某个地方将是 border 等。

function getOuterHTMLWithInlineStyle(el) {
    let s = getComputedStyle(el);
    let i = []
    for (let key in s) {
        if (!Number.isInteger(+key)) {
          let prop = key.replace(/\-([a-z])/g, v => v[1].toUpperCase());
          i.push(`${key}: ${s[key]}`);
        }
    }
    
    el.setAttribute('style', i.join("; "));
    
    return el.outerHTML;
}

function copy() {
    const e = document.querySelector('div')
    const html = getOuterHTMLWithInlineStyle(e)
       
    navigator.clipboard.writeText(html).then(() => {
      console.log('Succesfully copied HTML to clipboard');
    }, function(err) {
      console.error('Could not copy text.\nTried to copy the following:\n', html);
    });
}

div {
    padding: 5px 25px;
    border: 1px solid red; 
}

<div>Hello World!</div>
<br>
<button onClick='copy()'>Click me to copy</button>

---

第二个答案，使用白名单

与上面相同的演示，但添加了白名单:将复制以下 HTML:

<div style="border: 1px solid rgb(255, 0, 0); padding: 5px 25px">Hello World!</div>

function getOuterHTMLWithInlineStyle(el, whitelist = [ 'border', 'padding' ]) {
    let s = getComputedStyle(el);
    let i = []
    for (let key in s) {
        if (whitelist.includes(key)) {
          let prop = key.replace(/\-([a-z])/g, v => v[1].toUpperCase());
          i.push(`${key}: ${s[key]}`);
        }
    }
    
    el.setAttribute('style', i.join("; "));
    
    return el.outerHTML;
}

function copy() {
    const e = document.querySelector('div')
    const html = getOuterHTMLWithInlineStyle(e)
       
    navigator.clipboard.writeText(html).then(() => {
      console.log('Succesfully copied HTML to clipboard');
    }, function(err) {
      console.error('Could not copy text.\nTried to copy the following:\n', html);
    });
}

div {
    padding: 5px 25px;
    border: 1px solid red; 
}

<div>Hello World!</div>
<br>
<button onClick='copy()'>Click me to copy</button>

---

第三个答案，使用document.styleSheets

好的，v3，基于 this SO answer用户在哪里使用 document.styleSheets 仅从样式表中获取 css 并过滤那些非默认的。

使用 map() 和正则表达式，我们可以获得一个仅包含您需要的 CSS 值的字符串。

请注意，这可能不会 100% 有效，正则表达式不会考虑 CSS 值可能包含 { 的情况。如果您有非常复杂的值，您应该改进正则表达式。

下面的(折叠的)代码段将输出/复制以下 HTML:

<div style="padding: 5px 25px; border: 1px solid red;">Hello World!</div>

var proto = Element.prototype;
var slice = Function.call.bind(Array.prototype.slice);
var matches = Function.call.bind(proto.matchesSelector || 
                proto.mozMatchesSelector || proto.webkitMatchesSelector ||
                proto.msMatchesSelector || proto.oMatchesSelector);

var elementMatchCSSRule = function(element, cssRule) {
  return matches(element, cssRule.selectorText);
};

var cssRules = slice(document.styleSheets).reduce(function(rules, styleSheet) {
  return rules.concat(slice(styleSheet.cssRules));
}, []);

var getAppliedCss = function(elm) {
    var elementRules = cssRules.filter(elementMatchCSSRule.bind(null, elm));
    var rules =[];
    if (elementRules.length) {
        for (i = 0; i < elementRules.length; i++) {
            rules.push(elementRules[i].cssText)
        }       
    }
  
    return rules.map(r => /\{(.+)\}/g.exec(r)[1].trim()).join("; ");
}

function getOuterHTMLWithInlineStyle(el) {
    el.setAttribute('style', getAppliedCss(el));    
    return el.outerHTML;
}

function copy() {
    const e = document.querySelector('div')
    const html = getOuterHTMLWithInlineStyle(e)
       
    navigator.clipboard.writeText(html).then(() => {
      console.log('Succesfully copied HTML to clipboard');
    }, function(err) {
      console.error('Could not copy text.\nTried to copy the following:\n', html);
    });
}

div {
    padding: 5px 25px;
    border: 1px solid red; 
}

<div>Hello World!</div>
<br>
<button onClick='copy()'>Click me to copy</button>