vue如何将html插入到word模板的指定位置?

html-css016

vue如何将html插入到word模板的指定位置?,第1张

在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文档里面有没有图片,回头想想,之前是可以正常保存且显示图片的,现在不显示图片而只显示一个叉叉,看来是因为图片路劲出问题了。

点击word选项之后就会弹出一个对话框,然后在对话框上选择“高级”按钮,然后将右边窗口往下拉,找到“剪切复制、粘贴”选项卡下面的“将图片插入/粘贴为”选择“浮于文字上方”选项即可。同样在“显示文档内容”下面查看“先图片框”的前面勾是否去掉了。

如果该项被勾选的话将其去掉即可。

1、保存网页

在浏览器中访问目标网页,执行菜单“文件”→“另存为”,文件类型选择“网页,全部”。

2、用WPS文字打开html文件

执行“文件”→“打开”,文件类型选择“网页文件”或“所有文件”,以打开刚才下载得到的《[征稿八]怎样用WPS制作PDF》html文件。

3、去掉不需要的部分

注:表格形式出现的正文,可以选中后执行“表格”→“转换”→“表格转换为文本”去除表格外框。

4、最后另存为WPS文档或WORD文档即可。