VUE使用富文本自定义打印模板

当面对千千万万的打印格式需求时，这时可能需要使用打印模板。

但是后端使用客户提供的模板，往往需要进行“二次加工”。

所以

本文是提供给用户的打印模板编辑器，用户自定义模板，系统动态取值替换即可。

减少设计，开发，测试，运维等一系列的时间成本。

用户也是自己动手（系统还是要给初始模板），丰衣足食。

vue.config.js 或index.html 引入js

https://cdn.jsdelivr.net/npm/vue-ueditor-wrap@latest/lib/vue-ueditor-wrap.min.js

当然也可以npm install vue-ueditor-wrap

main.js 注册组件

Vue.component('vue-ueditor-wrap', window.VueUeditorWrap)

引入UEditor包到public/static 或者放在某个cdn目录 下方配置引入即可

测试模板

打印效果（打印需要取消显示头部）

模板数据

利用关键字“多行”，寻找对应数组的条数，动态插入数据行，叠加返回

1.需要了解split

把常用的逗号换成了关键字table一样，切不同的表数据进行处理“多行”

var regTable= /</tbody>.*?/g

切分后包含tbody的数组 = that.msg.split(regTable)

2.需要了解replace

转换后的值 = str.replace(正则表达式, function(符合正则的每一个数据) {

返回替换后的新数据

return tableData[l][map.get(s1).split(".")[1]]

})

工具地址： http://tools.xiaoyaoji.cn/form

GitHub地址： https://github.com/GavinZhuLei/vue-form-making

线上地址: http://49.233.133.108:8080/#/

from marking 模板分2个模板

一个模板是 fm-generate-form 用于展示从后端获取的json的数据

一个模板是 fm-making-form 用于拖拽生成json数据模板

form-marking 模板必须跟element-ui框架一起使用，其中包括拖拽的各种组件实际上是element的组件，包括筛选是否符合，都是调用了elementui的rules规则判断，包括最小值和最大值，正则，是否必填的判断

其中jsonData 是表单配置中生成的json数据，后端数据放入这个参数里，用于渲染生产form表单

editData 里放的是表单需要显示的表单数据，即表单初始化显示的初始值,以对象的形式放入，key值中input的model值。例如editData: {input_1554173787000_79900: "123"},

remoteFuncs 组件配置时配置的远端方法,保持和配置时输入的名称一致，具体方法名，可从jsonData中获取到remoteFunc的value中获取 ，可用于改变单选或者多选的默认value值,

具体改动value可以通过jsonData里props的值获取，这个一般用于获取后端参数后异步渲染value值。

当点击提交按钮时，可通过ref去调取目标模板是否校验完成 this.$refs.generateForm.getData().then(data =>{// 数据校验成功// data 为获取的表单数据}).catch(e =>{// 数据校验失败})

控件实际上是调用的element-ui框架里的组件库，当需要添加新的控件时，首先要在componentsConfig.js里去声明组件类型，包括type,name,icon以及options 其中type里是element-ui组件名，name是展示在左侧字段名字，icon是展示图标

图标是调用的 vue-awesome 组件库，需要用时，需要在Container.vue里important导入，方可使用。option是对这个控件做限制处理以及初始化处理具体可参考element-ui组件参数，然后需要去

WidgetFormItem.vue里添加控件模板，即拉取左侧图片到中间后，展示内容。具体写法类似于element-ui里的组件写法，没什么难度，最后只需要在GenerateFormItem.vue添加组件，这个主要是展示使用。也是最重要的一步，你所拉取的内容最终都会在这个vue里显示出来，这就是整个组件拉取的步骤。

在Word指定位置插入富文本域值（html文本）

遇到此问题，首先想到的就是各种百度。结果度娘了一会并没有发现有用的有效的解决方法，哎，看来还得靠自己啊。

首先整理了下手头上的资源，一是HtmlAgilityPack，专门解析Html文本用的；二是我有ASPOSE.Word。

再整理下思路：在Word中插入Html，首先有一点是肯定的，Word跟Html都是Document结构，这点应该是没啥怀疑的。如此的话就感觉好办多了，无非就是Document上插入几个节点，在Html插入节点的方式完全可以运用到此地方。

那么第一种解决方法就是：首先把Word转换为Html，然后在指定位置插入当前要插入的Html代码，然后再保存成Word格式的文档。

第二种方式就是：把Html解析出有效的文本，利用Word增加段落的方式添加从Html中解析出来的文本。

HtmlAgilityPack.HtmlDocument hd = new HtmlAgilityPack.HtmlDocument()

hd.LoadHtml(txtContent.Value)

hd.DocumentNode.Elements("p")；

通过此方式就可以获取到富文本域里面的所有文本信息。但是此种方式获取到的节点在ASPOSE类里面不识别。

再继续折腾吧，回到ASPOSE上面。找帮助文档，寻百度。

Document doc = new Document(Server.MapPath("~/tem_body.doc"))

DocumentBuilder docBuilder = new DocumentBuilder(doc)

docBuilder.InsertHtml(txtContent.Value)

doc.Save(Server.MapPath("~/") + "/TestWord121.doc")

打开保存后的文件，My God，这样就可以了。再试试带图片的，也很不错，图片也可以正常在Word里面正常显示。看来此插件确实很强大啊，不过到目前还并没有解决我的问题。就是插入的位置问题。目前它是插入的头部，即Body的Paragraph 0 处。

接下来就是解决如何把HTML文本插入到指定位置，想了想得首先知道要插入的位置，度娘了一会发现了东东。DocumentExplorer，它可以查看Word文档里面的Doc结构。

速度找了一个，打开后就可以清晰地看到Word文档：

这样的话就知道自己要插入的位置在那个地方。最简单的就是设置好模板，找到要插入的位置节点。

Document temdoc = new Document(Server.MapPath("~/tem.doc"))

Document doc = new Document()

DocumentBuilder docBuilder = new DocumentBuilder(doc)

docBuilder.InsertHtml(txtContent.Value)

docBuilder.ParagraphFormat.Alignment = ParagraphAlignment.Left

temdoc.AppendDocument(doc, ImportFormatMode.KeepSourceFormatting)

DocumentBuilder temdocBuilder = new DocumentBuilder(temdoc)

var temParas = temdocBuilder.Document.Sections[1].Body.Paragraphs

//int intIndexer = 0

foreach (Paragraph para in temParas)

{

// 这里面随便指定了一个位置，在Paragraphs的第六个节点处

temdocBuilder.Document.Sections[0].Body.InsertAfter(para.Clone(true), temdocBuilder.Document.Sections[0].Body.Paragraphs[5 + intIndexer - 1].NextSibling)

intIndexer++

}

temdocBuilder.Document.Sections.RemoveAt(1)

temdoc.Save(Server.MapPath("~/") + "/TestWord1212.doc")

再次保存后打开测试Word文档，符合自己的预期，解决了把HTML文本插入到Word文档的指定位置。再试试带图片的，结果发现Word文档里面有没有图片，回头想想，之前是可以正常保存且显示图片的，现在不显示图片而只显示一个叉叉，看来是因为图片路劲出问题了。

---