is there any way to copy the rendered HTML of a div?

Question

I am working on a signature generator for emails and I want to copy the final signature with the press of a button instead of manually selecting the signature and copying it to the clipboard. This means I need the image, text and styling for them.

I have tried a couple of variants, including the w3schools one, but no success, some of them are only copying the text, but without the styling.

Example: https://www.mail-signatures.com/signature-generator/

user_4148902 · Answer

Please try the below code.

function copyToClipboard(html) {
    var container = document.createElement('div')
    container.innerHTML = html
    container.style.position = 'fixed'
    container.style.pointerEvents = 'none'
    container.style.opacity = 0
    document.body.appendChild(container)
    window.getSelection().removeAllRanges()
    var range = document.createRange()
    range.selectNode(container)
    window.getSelection().addRange(range)
    document.execCommand('copy')
    document.body.removeChild(container);
    alert("Copied")
}

document.querySelector('button').onclick = function () {
    var htmlEditor = document.getElementById("html");
    copyToClipboard(htmlEditor.innerHTML)
}


    
        
        
            
                
                    
                        
                    

                    
                        
                            
                                
                                    
                                        Sohail Ashraf
                                         | Sales & Marketing Director
                                    
                                
                                
                                             a:        My Company                                               | Street, City  | Zip Code, Country
                                         
 e: john.doe@my-company.com  | w: www.my-company.com
                                        
 m: (800) 555-0299
                                         | p: (800) 555-0199

user_3554814 · Answer

document.execCommand() is deprecated.

With Clipboard API you can do the same in a very much simpler way:

try {
  const htmlCode = document.getElementById("html").innerHTML
  const blobInput = new Blob([htmlCode], { type: 'text/html' })
  navigator.clipboard.write([new ClipboardItem({ 'text/html': blobInput })])
  alert('Copied')
} catch (e) {
  alert(e)
}

is there any way to copy the rendered HTML of a div?

2 Answers