C# .net MVC 实战项目使用wangEditor实现word在线编辑 + 导出到word文档（解决html图片导出到word是个大红叉问题）（六）

经过各方面的资源查询和不懈的研究，困扰本人一个多星期的问题终于解决。
先上效果图

添加一些文本和图片

点击确认提交，将内容添加到word并下载

打开

提示、警告：
一开始找到使用 Aspose.Word 来实现，就是这个

别去用，我研究了三四天，不知道是个人问题还是，最后个人觉得两字：rubbish！

来吧，上代码：

我使用的是wangEditor 这个富文本编辑器，强烈推荐。

https://www.wangeditor.com/doc/

官方网站，进去之后。开始使用-基本使用。点击地址，另存为下载。

将 wangEditor.min.js 添加到content文件夹下

视图代码：

<head><script src="~/Content/wangEditor.min.js"></script><script src="~/Content/jquery-3.5.1.min.js"></script></head>@using (Html.BeginForm("ExportWord", "WangEditor", FormMethod.Post))
{<div id="div1" style="margin-top:50px;"><p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<textarea id="text1" name="text1" style="width:100%; height:200px;display: none;"></textarea>
<input type="submit" value="确认提交">
}
<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">const E = window.wangEditorconst editor = new E('#div1')const $text1 = $('#text1')editor.config.onchange = function (html) {//监控变化，同步更新到 textarea$text1.val(html)} editor.config.showLinkImg = false  //隐藏上传网络图片功能editor.config.uploadImgShowBase64 = true editor.config.uploadImgMaxSize = 20 * 1024 * 1024 //上传图片的最大大小 20M   //editor.config.height = 500   //设置编辑框的高度editor.create()//初始化 textarea 的值$text1.val(editor.txt.html())
</script>

控制器代码：

自己添加好相应的引用

 public class WangEditorController : Controller{public ActionResult Index(){return View();}/// <summary>/// 获取Html字符串中指定标签的指定属性的值 /// </summary>/// <param name="html">Html字符</param>/// <param name="tag">指定标签名</param>/// <param name="attr">指定属性名</param>/// <returns></returns>private List<string> GetHtmlAttr(string html, string tag, string attr){Regex re = new Regex(@"(<" + tag + @"[\w\W].+?>)");MatchCollection imgreg = re.Matches(html);List<string> m_Attributes = new List<string>();Regex attrReg = new Regex(@"([a-zA-Z1-9_-]+)\s*=\s*(\x27|\x22)([^\x27\x22]*)(\x27|\x22)", RegexOptions.IgnoreCase);for (int i = 0; i < imgreg.Count; i++){MatchCollection matchs = attrReg.Matches(imgreg[i].ToString());for (int j = 0; j < matchs.Count; j++){GroupCollection groups = matchs[j].Groups;if (attr.ToUpper() == groups[1].Value.ToUpper()){m_Attributes.Add(groups[3].Value);break;}}}return m_Attributes;}[ValidateInput(false)][HttpPost]public FileResult ExportWord(string text1){StringBuilder sb = new StringBuilder();sb.Append("<!DOCTYPE html>");sb.Append("<body>");//将text1中的img转换为图片绝对地址   之前为  base64 存储。如果直接输出到word，会是一个大红叉。//需要将base64 存储的格式解析，存储到本地，然后将text1中的图片格式替换为本地。            List<string> result = GetHtmlAttr(text1, "img", "src");int j = 1;foreach (var item in result){string temp = item;int index = item.IndexOf("base64");string value = item.Substring(index + 7);string address = Injpg(string.Format("text{0}", j), value);text1 = text1.Replace(temp, address);j++;}//sb.Append(text1);sb.Append("</body>");var byteArray = System.Text.Encoding.Default.GetBytes(sb.ToString());Response.ContentEncoding = System.Text.Encoding.GetEncoding("gb2312");return File(byteArray, "application/ms-word", "wordtest" + ".doc");}public string Injpg(string name, string base64str){string data = base64str;byte[] arr = Convert.FromBase64String(data);using (MemoryStream ms = new MemoryStream(arr)){Bitmap bmp = new Bitmap(ms);string p = string.Format("/temp_img/{0}.jpg", name);//temp_img为自己在根目录下新建的一个文件夹var w = Server.MapPath(p);bmp.Save(w, System.Drawing.Imaging.ImageFormat.Jpeg);ms.Close();return w;}}}

图片路径未替换前：

这种一长串的

替换后：

就是这么强大，烦恼！

C# .net MVC 实战项目使用wangEditor实现word在线编辑 + 导出到word文档（解决html图片导出到word是个大红叉问题）（六）相关推荐

html页面导出文件大小,【实战】通过 JS 将 HTML 导出为 PDF 文档
背景介绍某带道术用量确示常构端析以要效开的用,近不老人院信息管理系统项目,甲方要求将财务模块的各种报表导出为PDF文档,方便打印要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效 ...
基于JAVA项目任务跟踪系统计算机毕业设计源码+数据库+lw文档+系统+部署
基于JAVA项目任务跟踪系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA项目任务跟踪系统计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈: 项目架构:B/S架构开发语 ...
安卓源码，安卓开发，跑步打卡项目app源码，包括源码和简单文档
安卓源码,安卓开发,跑步打卡项目app源码,包括源码和简单文档 ID:6975644491117436Robergean
安卓源码，安卓开发，跑步打卡项目app源码，包括源码和简单文档
安卓源码,安卓开发,跑步打卡项目app源码,包括源码和简单文档
Java开发实战项目分享之学成在线v1.0项目总结
前言: 学成在线项目是传智燕青老师研发的JavaEE分布式微服务架构项目,采用SpringCloud框架研发,课程共20天,应广大学员的建议现将整个项目的技术点以问题的形式进行总结,方便大家学习总结. ...
IntelliJ IDEA 14,15 使用教程，实战总结，倾囊相授，内附PDF学习文档
转载博文,尊重原创,感谢前辈分享,原文地址:"请叫我大师兄__"的CSDN博客主页文章目录前言一.安装二.使用 1.Debug 2.修改内存 3.一般设置 4.高级设置 5 ...
从程序员到项目经理（二十九）：怎样写文档
在软件项目中,文档既是一项的重要成果,也是项目管理的有力工具.通过文档,可以稳定.明确的传达信息,实现项目内的有效沟通.所以写文档对项目经理来说,是一项必备的技能. 然而很多项目经理害怕写文档,似乎 ...
软件poc测试方案,桌面云项目POC测试方案（12页）-原创力文档
XX项目POC 测试报告修订记录版本变更描述变更人日期 0.1 文档创建 XX XX PAGE 1 一.测试目标为了虚拟化产品能够在实际业务工作中发挥预期作用,拟定测试目标如下: (1)用 ...
C# .net mvc 实战项目简单的登录验证和注册（一）
开发工具:VS2015 框架 .net MVC 效果图先实现验证码在App_Start文件夹中,添加类VerifyCodeHelper public class VerifyCodeHelper{ ...

C# .net MVC 实战项目使用wangEditor实现word在线编辑 + 导出到word文档（解决html图片导出到word是个大红叉问题）（六）

C# .net MVC 实战项目使用wangEditor实现word在线编辑 + 导出到word文档（解决html图片导出到word是个大红叉问题）（六）相关推荐

最新文章

热门文章

C# .net MVC 实战项目 使用wangEditor实现word在线编辑 + 导出到word文档（解决html图片导出到word是个大红叉问题） （六）

C# .net MVC 实战项目 使用wangEditor实现word在线编辑 + 导出到word文档（解决html图片导出到word是个大红叉问题） （六）相关推荐

最新文章

热门文章

C# .net MVC 实战项目使用wangEditor实现word在线编辑 + 导出到word文档（解决html图片导出到word是个大红叉问题）（六）

C# .net MVC 实战项目使用wangEditor实现word在线编辑 + 导出到word文档（解决html图片导出到word是个大红叉问题）（六）相关推荐