如何在不丟失樣式的情況下復制文本？

Question

一般的文本復制東西只是復制文本而不重視styles。 有什么方法可以復制文本而不丟失其固有屬性，如字體系列、字體大小等。 javascript function 會有所幫助。 謝謝。

Answer 1

在 HTML DOM 樹上選擇正確的元素，右鍵單擊它並選擇“復制”>“復制樣式”。

來源： https://getcssscan.com/blog/how-to-inspect-copy-element-css

Answer 2

您可以將Clipboard.write()與文本和 html 部件一起使用：

TS游樂場

// This will return the raw HTML, but perhaps you want to do something different,
// for example: recursively embed computed styles:
// https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
function serializeElement (element: Element): string {
  return element.outerHTML;
}

async function copyTextWithStyles (element: Element): Promise<void> {
  const html = serializeElement(element);
  const htmlBlob = new Blob([html], {type: 'text/html'});

  const text = element.textContent ?? '';
  const textBlob = new Blob([text], {type: 'text/plain'});

  const clipboardItem = new ClipboardItem({
      [htmlBlob.type]: htmlBlob,
      [textBlob.type]: textBlob,
  });

  return navigator.clipboard.write([clipboardItem]);
}