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

48 篇文章 12 订阅

经过各方面的资源查询和不懈的研究,困扰本人一个多星期的问题终于解决。
先上效果图
在这里插入图片描述
添加一些文本和图片
在这里插入图片描述

点击确认提交,将内容添加到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.wangEditor
    const 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;
            }
        }
    }

图片路径未替换前:
在这里插入图片描述
这种一长串的

替换后:

在这里插入图片描述

就是这么强大,烦恼!

  • 1
    点赞
  • 4
    收藏
  • 打赏
    打赏
  • 0
    评论
WebOffice是一款由北京点聚信息技术有限公司提供的完全免费(商业用途也免费)且功能强大的在线Word/excel/wps编辑辅助控件,可以实现: 1.在线编辑Word、Excel、PPT、WPS... ... 2.全面支持MS Office的界面定制,包括对于Office2007的全面支持 3.修订留痕 4.限制打印、保存、复制 5.直接保存到服务器,支持标准Http Post协议 6.强大的书签管理 7.套红、文档保护 8.模板管理 9.其他功能扩展 10.提供开发论坛http://www.dianju.cn/forum/,在其中提供软件更新及问题回答服务 本控件不同于其它同类软件,不是基于微软的开放源码DsoFramer,也不基于OLE,可以解决DsoFramer及其派生产品的一些稳定性问题 本控件不同于其它同类收费软件,本控件完全免费和界面完全可控制。 点聚会定期更新本控件,并解答论坛上的询问,免费不代表免服务,每一个使用者都能得到及时服务。 安装包内包含: 1.WebOffice安装包(仅包含WebOffice控件) 2.WebOffice接口SDK 3.WebOffice网页接口调用例子 4.DES手写及签章系统(Office签章系统)试用版。 5.演示章及证书 6.点聚产品白皮书 WebOffice组件可以无缝集成点聚公司的电子签章和手写审批类产品。 点聚信息(http://www.dianju.com.cn)是国内专业的安全和文档中间件软件制造商。公司注重自主知识产权产品的研发,始终坚持技术为本、服务为先的原则,在电子印章、手写签批、安全版式文档和电子表单等领域处于国内领先水平。 点聚自主研发的版式文件系统独创性的将整个系统缩小为1M大小的组件,并在多项重要技术指标上领先PDF和其它版式格式。 点聚支持全系列手写及签章解决方案,可同时提供Office签章系统(Word/Excel/Wps)、网页签章系统、版式签章系统. 点聚是国内唯一一家同时拥有国密和军密资质的电子印章及安全文档产品提供商(国密、军密、公安部销售许可)。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论

打赏作者

C#Code- Sheep

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值