添加附件的应用<file>

本文介绍了一种使用HTML和JavaScript实现邮件附件动态添加及删除的方法。通过table标签结合insertRow()和insertCell()方法,可以轻松实现在邮件中添加附件的功能,并提供了删除已添加附件的实现方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在邮件中我们经常用到添加附件,现在简单的应用下:

效果图:

实现原理:

采用table标签的,主要思想:采用table标签方式
1,点击文字之后,就自动创建(原先是自己/创建,现在拿到table对象之后,可以insertRow() insertCell())创建行和列
2,删除的时候通过父节点来移除

核心代码:

function creatMail(){
			var tab=document.getElementById("tabid");
			var tr=tab.insertRow();//插入一行
			var td=tr.insertCell();//插入一列
			var td2=tr.insertCell();//插入一列
			td.innerHTML="<input type='file' value='选择文件'/> ";
			/*

			td2.innerHTML="<a href='javascript:void(0)' onclick='Delrows(this)'>删除</a>";
	*/
			td2.innerHTML="<img src='11.jpg' alt='删除' onclick='Delrows(this)'>";

		}

全部代码如下《仅仅只是实现添加而已》:

<!DOCTYPE html>
<html>
  <head>
  	<!--主要思想:采用table标签方式
		1,点击文字之后,就自动创建(原先是自己/创建,现在拿到table对象之后,可以insertRow() insertCell())创建行和列
		2,删除的时候通过父节点来移除
	-->
	
    <title>AddMail.html</title>
	
	<link rel="stylesheet" type="text/css" href="1.css">
	<script type="text/javascript">
		function creatMail(){
			var tab=document.getElementById("tabid");
			var tr=tab.insertRow();//插入一行
			var td=tr.insertCell();//插入一列
			var td2=tr.insertCell();//插入一列
			td.innerHTML="<input type='file' value='选择文件'/> ";
			/*

			td2.innerHTML="<a href='javascript:void(0)' onclick='Delrows(this)'>删除</a>";
	*/
			td2.innerHTML="<img src='11.jpg' alt='删除' onclick='Delrows(this)'>";

		}
		
		function Delrows(node){//当前对象是<a>里面
			
			var tr=node.parentNode.parentNode;//tr对象
			tr.parentNode.removeChild(tr);//tr的父对象table移除子节点
		}
	</script>
  </head>
  
  <body>
  <table id="tabid">
  	<tr>
  		<td><a href="javascript:void(0)" onclick="creatMail()">添加附件</a></td>
  	</tr>
	
  </table>
  </body>
</html>


<think>我们有一个List<string>,需要将其转换为HTML表格字符串,然后通过Outlook发送邮件。 步骤: 1. 将List<string>转换为HTML表格字符串。 注意:每个字符串作为表格的一行,我们这里可以有两种方式: a) 每个字符串作为一行,表格只有一列(或者加上序号列)。 b) 如果字符串本身是逗号分隔的多列数据,我们可以拆分字符串为多列。 由于问题中没有明确,我们假设每个字符串就是一行一列(即整个列表只有一列),但为了通用性,我们也可以考虑如果字符串包含逗号则拆分为多列。 但是,问题描述中并没有提到字符串包含逗号,所以我们先按一列处理,但设计上可以扩展。 2. 生成HTML表格字符串,注意要使用安全的HTML编码(防止XSS和格式混乱)。 3. 使用Outlook发送邮件,将HTML表格作为邮件正文。 但是,用户要求使用Email.SendEmailViaOutlook方法,所以我们假设已经有一个发送邮件的方法,或者我们需要实现一个。 由于没有提供SendEmailViaOutlook的具体实现,我们将提供一个通用的发送邮件的方法,使用Outlook客户端。 注意:使用Outlook发送邮件需要引用Microsoft.Office.Interop.Outlook。 我们将分步骤进行: 步骤1:生成HTML表格字符串的方法 步骤2:发送邮件的方法 但是,由于用户要求使用Email.SendEmailViaOutlook,我们假设用户已经有一个这样的类和方法。我们只需要生成HTML字符串,然后作为邮件正文传入即可。 因此,我们主要关注生成HTML表格字符串。 根据之前回答的指导,我们使用StringBuilder构建表格,并对每个字符串进行HTML编码。 由于我们只有一列,但为了显示序号,我们添加一列序号。 代码: 生成HTML表格的方法:</think>### C# 将 `List<String>` 转换为 HTML 表格并发送邮件的完整方案 #### 1️⃣ 生成 HTML 表格的核心方法 ```csharp using System.Text; using System.Web; public string GenerateHtmlTable(List<string> data, string[] headers = null) { if (data == null || data.Count == 0) return "<p>无数据</p>"; var html = new StringBuilder(); // 添加表格样式 html.AppendLine("<style>"); html.AppendLine(" .data-table { border-collapse: collapse; width: 100%; }"); html.AppendLine(" .data-table th { background-color: #f2f2f2; padding: 8px; }"); html.AppendLine(" .data-table td, .data-table th { border: 1px solid #ddd; padding: 8px; }"); html.AppendLine(" .data-table tr:nth-child(even) { background-color: #f9f9f9; }"); html.AppendLine("</style>"); // 创建表格 html.AppendLine("<table class='data-table'>"); // 添加表头 html.AppendLine("<thead><tr>"); html.AppendLine($"<th>序号</th>"); if (headers != null) { foreach (var header in headers) { html.AppendLine($"<th>{HttpUtility.HtmlEncode(header)}</th>"); } } else { html.AppendLine($"<th>内容</th>"); } html.AppendLine("</tr></thead>"); // 添加表格内容 html.AppendLine("<tbody>"); for (int i = 0; i < data.Count; i++) { // 安全处理:防止XSS攻击 string safeValue = HttpUtility.HtmlEncode(data[i]?.Trim() ?? ""); html.AppendLine("<tr>"); html.AppendLine($"<td>{i + 1}</td>"); html.AppendLine($"<td>{safeValue}</td>"); html.AppendLine("</tr>"); } html.AppendLine("</tbody></table>"); return html.ToString(); } ``` #### 2️⃣ 发送邮件的实现 (使用 Outlook) ```csharp using Outlook = Microsoft.Office.Interop.Outlook; public void SendEmailViaOutlook( string toEmail, string subject, string htmlBody, List<string> attachments = null) { try { var outlookApp = new Outlook.Application(); Outlook.MailItem mailItem = (Outlook.MailItem)outlookApp.CreateItem(Outlook.OlItemType.olMailItem); mailItem.Subject = subject; mailItem.To = toEmail; mailItem.HTMLBody = htmlBody; // 添加附件 if (attachments != null && attachments.Count > 0) { foreach (string filePath in attachments) { if (File.Exists(filePath)) mailItem.Attachments.Add(filePath); } } mailItem.Display(); // 显示邮件窗口(自动发送) // mailItem.Send(); // 直接发送(不显示窗口) } catch (Exception ex) { Console.WriteLine($"发送邮件失败: {ex.Message}"); } } ``` #### 3️⃣ 完整使用示例 ```csharp // 准备数据 var productionData = new List<string> { "产品A | 100件", "产品B | 250件", "产品C | 80件 <测试>", "产品D | 300件" }; // 生成HTML表格 string htmlTable = GenerateHtmlTable(productionData, new[] { "产品名称", "生产数量" }); // 创建完整邮件正文 string emailBody = $@" <html> <head><title>生产报告</title></head> <body> <h2>今日生产统计报告</h2> {htmlTable} <p>报告生成时间: {DateTime.Now:yyyy-MM-dd HH:mm}</p> <p style='color:gray;'>本邮件由系统自动发送,请勿回复</p> </body> </html>"; // 发送邮件 SendEmailViaOutlook( toEmail: "manager@company.com", subject: $"生产报告 - {DateTime.Today:yyyyMMdd}", htmlBody: emailBody, attachments: new List<string> { @"C:\Reports\daily.pdf" } ); ``` #### ⚙️ 关键技术说明 1. **安全处理**: - 使用 `HttpUtility.HtmlEncode` 防止 XSS 攻击 - 空值处理:`data[i]?.Trim() ?? ""` 避免空引用异常 - 自动过滤无效字符(如 `<`, `>` 等) 2. **表格优化**: - 添加斑马纹样式:`tr:nth-child(even)` - 响应式设计:`width: 100%` - 可选表头参数,支持自定义列名 3. **邮件集成**: - 使用 Outlook Interop 直接集成邮件客户端 - 支持附件添加(自动检查文件存在性) - 提供两种发送模式:`Display()`(预览)和 `Send()`(直接发送) 4. **数据预处理**: - 自动过滤空项:`if (data == null || data.Count == 0)` - 空格处理:`Trim()` 清除多余空格 - 序号自动生成 #### 📧 生成的 HTML 表示例 ```html <html> <head><title>生产报告</title> <style> .data-table { border-collapse: collapse; width: 100%; } .data-table th { background-color: #f2f2f2; padding: 8px; } .data-table td, .data-table th { border: 1px solid #ddd; padding: 8px; } .data-table tr:nth-child(even) { background-color: #f9f9f9; } </style> </head> <body> <h2>今日生产统计报告</h2> <table class='data-table'> <thead><tr> <th>序号</th> <th>产品名称</th> <th>生产数量</th> </tr></thead> <tbody> <tr><td>1</td><td>产品A</td><td>100件</td></tr> <tr><td>2</td><td>产品B</td><td>250件</td></tr> <tr><td>3</td><td>产品C</td><td>80件 <测试></td></tr> <tr><td>4</td><td>产品D</td><td>300件</td></tr> </tbody> </table> <p>报告生成时间: 2023-08-15 14:30</p> </body> </html> ``` #### ⚠️ 常见问题解决 1. **Outlook 未安装问题**: - 备用方案:使用 `System.Net.Mail` ```csharp using (var client = new SmtpClient("smtp.office365.com", 587)) { client.EnableSsl = true; client.Credentials = new NetworkCredential("your@email.com", "password"); var mail = new MailMessage( from: "sender@company.com", to: "receiver@company.com", subject: "生产报告", body: htmlBody ); mail.IsBodyHtml = true; client.Send(mail); } ``` 2. **数据包含分隔符的处理**: ```csharp // 如果数据格式为 "产品A|100件" var parts = data[i].Split('|'); foreach (var part in parts) { html.AppendLine($"<td>{HttpUtility.HtmlEncode(part)}</td>"); } ``` 3. **性能优化**: - 对于大数据量(>1000行),使用分页或附件发送 - 使用 `StringBuilder` 替代字符串拼接 - 异步发送邮件避免UI阻塞 #### 📊 邮件发送方法对比 | **方法** | **优点** | **缺点** | **适用场景** | |----------|---------|---------|-------------| | Outlook Interop | 直接集成客户端,支持附件 | 依赖Office安装 | 企业内部系统 | | SMTP 协议 | 无需Office,跨平台 | 需配置服务器信息 | 云服务/Web应用 | | Exchange Web | 支持高级邮件功能 | 配置复杂 | 企业级应用 | --- ### 相关问题 1. 如何将 `List<String>` 中的数据按特定格式(如 CSV)拆分到多列? 2. 在 ASP.NET Core 中如何替代 `HttpUtility.HtmlEncode`? 3. 如何实现邮件发送的异步操作以避免界面卡顿? 4. 当数据量过大时,如何实现 HTML 表格的分页显示? 5. 如何为 HTML 表格添加排序和筛选功能? 6. 在未安装 Outlook 的环境中,如何通过 SMTP 协议发送 HTML 邮件?[^1][^2]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值