javascript函数，将从网页复制/捕获html内容并将其粘贴/显示在电子邮件中答案

【问题标题】：javascript function that will copy/capture html content from webpage & paste/display it in an emailjavascript函数，将从网页复制/捕获html内容并将其粘贴/显示在电子邮件中
【发布时间】：2017-03-07 23:39:33
【问题描述】：

我正在寻找一个 Javascript 函数，它可以复制网页的内容 (html)，然后将此内容粘贴到电子邮件中。

基本上，我有一个显示订单收据之类的页面，我想做的是捕获此页面并将其粘贴到电子邮件正文中。

下面是我正在玩的一个小代码 sn-p。目前，正在研究 getElementsById()。没什么可看的，但应该展示我目前的想法和概念。也就是说，我愿意接受所有建议。

<!DOCTYPE html>
<html>
<body>

<h1>I'm A Heading</h1>

<div id="differnt_colors" style="border:1px solid black;background-color:pink">
  <p style="color:red;">I'm A Red Paragraph</p>
  <p style="color:green;">I'm A Green Paragraph</p>
  <p style="color:blue;">I'm A Blue Paragraph</p>
</div>

<p>
  Click the button to copy the div element above,
  including all its attributes and child elements,
  and append it to the document, and send email.
</p>

<button onclick="myFunction()">Copy And Send</button>

<script>
function myFunction() {
    var htmlElementContents = document.getElementById("differnt_colors");
    var cloneNodeTrueFalse = htmlElementContents.cloneNode(true);
    document.body.appendChild(cloneNodeTrueFalse);
}
</script>

</body>
</html>

以下是相关应用程序的“一些”前端和后端代码。此代码与发送电子邮件相关联。这些 sn-ps 在一些地方被删节了。

<%--Recipients--%>
        <fieldset class="legendbody">
            <legend class="legendTitle" style="font-size: 14px">
                <a name="Recipients">Recipients</a>
            </legend>
            <asp:CheckBoxList ID="CheckBoxListEmail" CssClass="checkBoxList" runat="server" RepeatDirection="Horizontal">
                <asp:ListItem Value="doberly@jacobscorp.com">Dean Oberly</asp:ListItem>
                <asp:ListItem Value="jtravis@jacobsco.onmicrosoft.com">Jimmy Travis</asp:ListItem>
                <asp:ListItem Value="cpetersen@jacobscorp.com">Christine Petersen</asp:ListItem>
                <asp:ListItem Value="cplumb@jacobscorp.com">Chad Plumb</asp:ListItem>
                <asp:ListItem Value="kfriedmann@jacobscorp.com">Kimberly Friedmann</asp:ListItem>
            </asp:CheckBoxList>

            <%--Send--%>
            <div style="text-align: center; font-size: 20px; font-weight: bold">
                <asp:LinkButton ID="LinkButtonSendEvent" runat="server" Visible="false">
                    <p>Send</p>
                </asp:LinkButton>
                <asp:Label ID="LabelEmailMessage" runat="server" Text=""></asp:Label>
            </div>
        </fieldset>
    </div>

Protected Sub LinkButtonSendEvent_Click(sender As Object, e As EventArgs) Handles LinkButtonSendEvent.Click
  Dim ELink As String = "http://s100dd5a:3010/harris-CGI/CustomerContactEventSelect.d2w/REPORT?baseVar=BaseConfiguration%2Eicl&portal=CUSTOMERCONTACT&"
        ELink = ELink & "contactNumber=" & LabelEventContNum.Text & "&customerNumber=" & LabelEventCustNum.Text & "&customerName=" & Server.UrlEncode(LabelEventCust.Text)
        ELink = ELink & "&eventSequence=" & LabelEventNum.Text & "&eventCode=" & LabelEventType.Text

  Dim htmlcontent As String = "<table> "
  h = h & "<tr><td style=""text-align:right; width:100px;"">Event Num:</td><td style=""padding-left:5px; font-size:small; width:700px;""> "
  h = h & "<span id=""ContentPlaceHolder1_LabelEventNum"">" & LabelEventNum.Text & "</span></td></tr> "

  Dim msg As New MailMessage()
  msg.From = New MailAddress(Session("UserName") & "@jacobscorp.com")

  For Each i As ListItem In CheckBoxListEmail.Items
    If i.Selected Then
      msg.To.Add(i.Value.ToString)
    End If
    Next
    msg.Subject = "Emailing Event #" & LabelEventNum.Text & " - " & LabelEventDesc.Text
    msg.IsBodyHtml = True
    msg.Body = h

    Dim client As New SmtpClient
    client.UseDefaultCredentials = False
    client.Host = "10.10.10.9"
    client.DeliveryMethod = SmtpDeliveryMethod.Network
    client.EnableSsl = False

    Try
      client.Send(msg)
      LabelEmailMessage.Text = "Message Sent Successfully"
      LinkButtonSendEvent.Visible = False

    Catch ex As Exception
      LabelEmailMessage.Text = ex.Message
    End Try

【问题讨论】：

check this
什么电子邮件？你打算怎么寄？还有奇怪的编号是怎么回事 - 你想要所有这些东西，对，我怀疑有人会说“该死，我有满足 2 和 3 但不是功能的东西”。
没有getElementsById这样的方法。页面上的每个 ID 都必须是唯一的。因此，getElementById 返回一个元素。并且是单数。此外，您不能使用 Javascript 发送电子邮件。
@vlaz 好点。自从我使用 Stack 已经有一段时间了。我已经编辑了帖子并添加了一些当前与发送电子邮件相关的代码。
@Pamblam 你是对的，会改变的。

标签： javascript jquery html css email

【解决方案1】：

AJAX + 网络服务：

您通常需要调用后端 Web 服务来发送电子邮件，并使用 XMLHttpRequest 发送带有消息内容的 AJAX 请求，假设您已准备好后端 Web 服务来处理此问题，代码如下所示喜欢：

<!DOCTYPE html>
<html>
<body>

<h1>I'm A Heading</h1>

<div id="differnt_colors" style="border:1px solid black;background-color:pink">
  <p style="color:red;">I'm A Red Paragraph</p>
  <p style="color:green;">I'm A Green Paragraph</p>
  <p style="color:blue;">I'm A Blue Paragraph</p>
</div>

<p>
  Click the button to copy the div element above,
  including all its attributes and child elements,
  and append it to the document, and send email.
</p>

<button onclick="myFunction()">Copy And Send</button>

<script>
function myFunction() {
  var htmlElementContents = document.getElementById("differnt_colors").innerHTML;    
    
  var http = new XMLHttpRequest();
  var url = "send-email.php";
  var params = "data=" + encodeURI(htmlElementContents);
  http.open("POST", url, true);

 
  http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  http.onreadystatechange = function() {
      if(http.readyState == 4 && http.status == 200) {
          alert("Message Send to Web Service: " + http.responseText);
      }else{
          alert("Something went wrong.")
      }
  }
  http.send(params);
}
</script>

</body>
</html>

【讨论】：