有什么办法复制div呈现的HTML?

本教程将介绍有没有办法复制div呈现的HTML?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

有什么办法复制div呈现的HTML? 教程 第1张

问题描述

我正在开发一个电子邮件签名生成器,我希望通过按下按钮复制最终的签名,而不是手动选择签名并将其复制到剪贴板。这意味着我需要它们的图像、文本和样式。

我尝试了几个变体,包括W3School One,但没有成功,有些只复制了文本,但没有样式。

示例:https://www.mail-signatures.com/signature-generator/

推荐答案

请尝试以下代码。

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.qumuban.com/redirect/aHR0cHM6Ly93d3cubXktY29tcGFueS5jb20v" target="_blank" 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 &amp; 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="https://www.qumuban.com/redirect/aHR0cDovL3d3dy5teS1jb21wYW55LmNvbQ==" target="_blank"
  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.qumuban.com/redirect/aHR0cHM6Ly93d3cuZmFjZWJvb2suY29tL015Q29tcGFueQ==" target="_blank" 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>&nbsp;</span>
 <span fgid="16087">
 <a href="https://www.qumuban.com/redirect/aHR0cHM6Ly90d2l0dGVyLmNvbS9NeUNvbXBhbnk0MDQ=" target="_blank" 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>&nbsp;</span>
 <span fgid="16106">
  <a href="https://www.qumuban.com/redirect/aHR0cHM6Ly93d3cueW91dHViZS5jb20vdXNlci9NeUNvbXBhbnlDaGFubmVs" target="_blank" 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>&nbsp;</span>
 <span fgid="16125">
<a href="https://www.qumuban.com/redirect/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL2NvbXBhbnkvbXljb21wYW55NDA0" target="_blank" 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>&nbsp;</span>
 <span fgid="16144">
 <a href="https://www.qumuban.com/redirect/aHR0cHM6Ly93d3cuaW5zdGFncmFtLmNvbS9teWNvbXBhbnk0MDQv" target="_blank" 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>&nbsp;</span>
 <span fgid="16163">
  <a href="https://www.qumuban.com/redirect/aHR0cHM6Ly9waW50ZXJlc3QuY29tL215Y29tcGFueTQwNC8=" target="_blank" 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>&nbsp;</span>
</td>
  </tr>

 </tbody>
</table>
  </td>
 </tr>
</tbody>
  </table>
 </div>

好了关于有什么办法复制div呈现的HTML?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。