如何在不丢失样式的情况下复制文本？

Question

The general text copy thing just copies the text without giving nay importance to the styles. Is there any way to copy text without losing it's inherent properties like font family, font size etc. A javascript function would be helpful. Thanks.

Answer 1

Having the right element selected on the HTML DOM tree, right-click on it and choose “Copy” > “Copy styles”.

Source: https://getcssscan.com/blog/how-to-inspect-copy-element-css

Answer 2

You can use Clipboard.write() with both text and html parts:

TS Playground

// 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]);
}