0

What is the best way to copy HTML to a clipboard, so that the user can copy it prettified to Email clients (at least outlook)?

I have an Angular app running which uses Angular Materials Clipboard module to copy content to the clipboard:

import { Clipboard } from '@angular/cdk/clipboard';

constructor(private clipboard: Clipboard) { }

copy(): void {
  const content = document.getElementById('copy-field');
  this.clipboard.copy(pretty(content!.innerHTML));
}

I understand that I copy HTML code. So after copy(), I paste raw HTML. Is there any way to render this HTML code before copying it? Or can I use the rendered code directly?

What do I want to achieve?

The user should be able to copy everything to his/her email client. For example, an image with text should be displayed like in the browser. But my current solution displays the HTML (...).

Nico Schuck
  • 832
  • 3
  • 15
  • 32
  • Why do you need to render the html directly? – Mehyar Sawas Jan 06 '23 at 02:40
  • I want to copy it to my email pretty. – Nico Schuck Jan 06 '23 at 09:20
  • Is your question about **1.** whether it's acceptable/safe to rip the `innerHTML` straight out of the DOM or **2.** you actually _have_ the HTML beforehand, so you're just rendering it in order to prettify it and then use the prettified code and you want to know if there's a better way to do this? Can you edit your question to clarify this? – gyohza Jan 06 '23 at 13:48
  • @gyohza i added some more details to my question – Nico Schuck Jan 07 '23 at 11:57
  • Ah - I see. What you want is to copy [**rich text**](https://www.pcmag.com/encyclopedia/term/rich-text). Please check if [this answer](https://stackoverflow.com/questions/23934656/how-can-i-copy-rich-text-contents-to-the-clipboard-with-javascript) helps you! If it does, we might need to flag your question and link it to that other question. – gyohza Jan 08 '23 at 20:04

0 Answers0