Js-Html转文本

最近在折腾用 js 实现 html 转文本的东东，包括 html 转 docx、doc 以及 pdf 等文档，首选当然是用别人造好的轮子啦。

html 转 pdf 用的轮子是 jsPdf，这东西好用是好用，但是有一个很大的缺点，对中文的支持太差了，我用的是fromhtml方法，研究文档研究了几天，还是没发现对中文支持的方法，尝试了各种奇技淫巧（换字体，解码等）后，发现它这个方法根本就不支持中文，当然他官方就声明了不支持中文。不过他的 addhtml 方法勉强实现了我的需求，但是因为是采用截图方式，断页很不智能，甚至会出现文字被生生的拦腰截断的情况，加之生成的 pdf 像素实在惨不忍睹，决定还是放弃了。具体的实现，网上有很多的文档，大家可以自行查阅，我也是根据自己的需求定制了而已，所以源码示例就不做过多分享了。

html 转 word 文档，选的轮子是 html-docx，关于这个轮子的资料很少，不过看一下源码及实例还是很快上手的，网上说什么缺点是要用在线编辑器什么的，感觉就是没有自己动脑想过，直接抄官方示例的。官方示例摆出来的虽然是要用一个在线编辑器，但是我们可以根据自己的需求进行改良，比如我的需求是根据选定网页的不同区域，下载不同内容的 word 文档，就不容许出现什么在线编辑器啦，好吧，没什么要说了，看代码吧。

public downloadDocx(printArea: any, outputName: string) {// +++++++ 样式定制 +++++++const styles = `//code here`;// 样式加载let styleTagInnerHtml = '<style>';styleTagInnerHtml += styles;styleTagInnerHtml += '</style>';const content = '<!DOCTYPE html><html>' +'<head>' + styleTagInnerHtml + '</head>' +'<body><div>' printArea.outerHTML + '</div>';// +++++++ html 转 word +++++++const converted = htmlDocx.asBlob(content);saveAs(converted, outputName + '.docx');}
复制代码

上面的代码是我写的示例，当然涉及业务需求更加复杂的逻辑就不展示了，上面的示例代码分为三部分。

第一部分是样式的定制，因为这个轮子要转 word 需要重新写一份 html 文档，而这份文档是检索不到我们在外面写的css的，只能检索得到 html 文档的 style 标签里的css，所以需要根据自己的需求重新生成一份 css 文件，放到 html 文档里面。还有一个坑就是，word 并不是支持所有 css 属性的，一些比较新的属性建议还是不要用了，用老一点的方法实现吧。

第二部分是 css 文档部分，这部分主要是生成新的文档，用于转换成 word 文档。

第三部分是用轮子转换编码格式并保存为 word 文档的部分，这里其实是用了两个轮子：html-docx 和 file-saver，html-docx 这个轮子用于转换编码格式，file-saver 用于保存文档，后缀可以根据自己的需求改，但是要记得编码格式要对应上。

当然，我这里只是一个简单的示例，切无生搬硬套，可以根据自己的需求进行定制。

Js-Html转文本相关推荐

js实现复制文本内容到剪切板
js实现复制文本内容到剪切板一.总结一句话总结:就是document的execCommand('copy')方法二.js实现复制文本内容到剪切板直接上代码: 1 <script type ...
php去除编辑器html标签,js处理富文本编辑器转义、去除转义、去除HTML标签
富文本编辑器生成的HTML标签,进行转义,然后写入数据库,防止脚本注入: function htmlEncode(value){ return $(' } 从数据库拿出的转义后的HTML标签内容,先得 ...
从富文本(html字符串)中获取图片,js获取富文本中的第一张图片(正则表达式)
js获取富文本中的第一张图片url正则公式及去除字符串里面的html标签后台发来一个富文本字符串里面可能包含了0.1.2.3-个图片标签(img),我们的任务是获取这个字符串里面第一张图片的url, ...
html 弹出复选框,js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解 ...
[事件处理] js实现的文本框内容发生改变立马触发事件简单介绍
js实现的文本框内容发生改变立马触发事件简单介绍: 本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入 ...
通过js获得input文本框输入的值
如何通过js获得input文本框输入的值. 前言我们编写的被载入浏览器的HTML页面都是一个 Document 对象.对于Document对象可以使我们通过代码(比如javascript)对HTML ...
js 获取富文本的文本
js获取富文本中的文本 <h1><span style=\"color: rgb(29, 57, 196);\">xxx我是富文本~~~·</span ...
前端js下载txt文本
前端js下载txt文本在web应用开发中下载为文本比较少,但是对于一些小说网站应用应该会比较多的! 闲话短说,直接上代码! 1.将下面代码这个保存为一个xxx.js var saveAs = s ...
js中判断文本框是否为空的两种方法
js中判断文本框是否为空的两种方法 //用户名非空验证 function checkUserName(){ var name = document.myform.txtUser; //在这里我认为: ...
HTML JS实现富文本编辑器
HTML/CSS/JS 目录:https://blog.csdn.net/dkbnull/article/details/87934939 JS实现富文本编辑器主要借助 document.execCo ...

Js-Html转文本

Js-Html转文本相关推荐

最新文章

热门文章