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/
Advertisement
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) }
<button>Copy</button> <div id="html"> <!-- The HTML you want to copy --> <table style="width: 525px; font-size: 11pt; font-family: Arial, sans-serif;" cellpadding="0" cellspacing="0" fgid="15712"> <tbody fgid="15718"> <tr fgid="15724"> <td width="125" style="font-size: 10pt; font-family: Arial, sans-serif; border-right: 1px solid; border-right-color: #fb6303; width: 125px; padding-right: 10px; vertical-align: top;" valign="top" rowspan="6" fgid="15730"> <a href="https://www.my-company.com/" target="_blank" fgid="15736"><img border="0" alt="Logo" width="105" style="width:105px; height:auto; border:0;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator-dm/bease-fox/logo.png" fgid="15742"></a> </td> <td style="padding-left:10px" fgid="15749"> <table cellpadding="0" cellspacing="0" fgid="15755"> <tbody fgid="15761"> <tr fgid="15767"> <td style="font-size: 10pt; color:#0079ac; font-family: Arial, sans-serif; width: 400px; padding-bottom: 5px; padding-left: 10px; vertical-align: top;" valign="top" fgid="15773"> <strong fgid="15779"><span style="font-size: 11pt; font-family: Arial, sans-serif; color:#fb6303;" fgid="15785">Sohail Ashraf</span></strong> <strong style="font-family: Arial, sans-serif; font-size:11pt; color:#000000;" fgid="15793"><span fgid="15799"> | </span>Sales & Marketing Director</strong> </td> </tr> <tr fgid="15808"> <td style="font-size: 10pt; color:#444444; font-family: Arial, sans-serif; padding-bottom: 5px; padding-top: 5px; padding-left: 10px; vertical-align: top; line-height:17px;" valign="top" fgid="15814"> <span fgid="15820"> <span style="color: #fb6303;" fgid="15827"><strong fgid="15833">a: </strong></span> </span> <span fgid="15842"> <span style="font-family: Arial, sans-serif; font-size:10pt; color:#000000;" fgid="15849">My Company</span> </span> <span fgid="15858"> <span style="font-size: 10pt; font-family: Arial, sans-serif; color: #000000;" fgid="15865"><span fgid="15871"> | </span>Street, City<span fgid="15879"></span></span> <span style="font-size: 10pt; font-family: Arial, sans-serif; color: #000000;" fgid="15886"><span fgid="15892"> | </span>Zip Code, Country</span> </span> <span fgid="15902"><br fgid="15908"></span> <span fgid="15915"><span style="color: #fb6303;" fgid="15921"><strong fgid="15927">e:</strong></span><span style="font-size: 10pt; font-family: Arial, sans-serif; color:#000000;" fgid="15934"> john.doe@my-company.com</span></span> <span fgid="15942"><span fgid="15948"> | </span><span style="color: #fb6303;" fgid="15955"><strong fgid="15961">w:</strong></span><a href="http://www.my-company.com" target="_blank" rel="noopener" style="text-decoration:none;" fgid="15968"><span style="font-size: 10pt; font-family: Arial, sans-serif; color:#000000;" fgid="15974"> www.my-company.com</span></a></span> <span fgid="15982"><br fgid="15988"></span> <span fgid="15995"><span style="color: #fb6303;" fgid="16001"><strong fgid="16007">m:</strong></span><span style="font-size: 10pt; font-family: Arial, sans-serif; color:#000000;" fgid="16014"> (800) 555-0299</span></span> <span fgid="16022"><span fgid="16028"> | </span><span style="color: #fb6303;" fgid="16035"><strong fgid="16041">p:</strong></span><span style="font-size: 10pt; font-family: Arial, sans-serif; color:#000000;" fgid="16048"> (800) 555-0199</span></span> </td> </tr> <tr fgid="16056"> <td style="font-size: 10pt; font-family: Arial, sans-serif; padding-bottom: 0px; padding-top: 5px; padding-left: 10px; vertical-align: bottom;" valign="bottom" fgid="16062"> <span fgid="16068"><a href="https://www.facebook.com/MyCompany" target="_blank" rel="noopener" fgid="16074"><img border="0" width="19" alt="facebook icon" style="border:0; height:19px; width:19px" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator-dm/bease-fox/fb.png" fgid="16080"></a> </span> <span fgid="16087"> <a href="https://twitter.com/MyCompany404" target="_blank" rel="noopener" fgid="16093"><img border="0" width="19" alt="twitter icon" style="border:0; height:19px; width:19px" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator-dm/bease-fox/tt.png" fgid="16099"></a> </span> <span fgid="16106"> <a href="https://www.youtube.com/user/MyCompanyChannel" target="_blank" rel="noopener" fgid="16112"><img border="0" width="19" alt="youtube icon" style="border:0; height:19px; width:19px" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator-dm/bease-fox/yt.png" fgid="16118"></a> </span> <span fgid="16125"> <a href="https://www.linkedin.com/company/mycompany404" target="_blank" rel="noopener" fgid="16131"><img border="0" width="19" alt="linkedin icon" style="border:0; height:19px; width:19px" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator-dm/bease-fox/ln.png" fgid="16137"></a> </span> <span fgid="16144"> <a href="https://www.instagram.com/mycompany404/" target="_blank" rel="noopener" fgid="16150"><img border="0" width="19" alt="instagram icon" style="border:0; height:19px; width:19px" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator-dm/bease-fox/it.png" fgid="16156"></a> </span> <span fgid="16163"> <a href="https://pinterest.com/mycompany404/" target="_blank" rel="noopener" fgid="16169"><img border="0" width="19" alt="pinterest icon" style="border:0; height:19px; width:19px" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator-dm/bease-fox/pt.png" fgid="16175"></a> </span> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>