引入 dest/js/html2enml.js
<script src="./dest/js/html2enml.js"></script>然后实例化 html2enml类，并按照顺序调用成员方法。
var h2e=new html2enml();
// 调用成员方法
h2e.xxx但由于浏览器环境所限，最终只能做到如下的格式：
<html>
<en-note>
...
</en-note>
</html>需要你去除最外层的<html>和</html>，取出<en-note></en-note>中的内容，并按照ENML 的规范在头部加上如下声明：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE en-note SYSTEM "http://xml.evernote.com/pub/enml2.dtd">具体可参考： 印象笔记开发者文档-创建笔记 印象笔记开发者文档-ENML 规范
因为在浏览器环境中，无法做到闭合<br>和<hr>节点。所以需要进行二次处理，这里给出我写的 Python 的处理方式：
# 正则匹配出 html 中的 tag 标签，在它">"前加入"/"闭合它。
def addClose(tag, html):
# '(<br>)|(<br .*?[^/]>)'
# '(<hr>)|(<hr .*?[^/]>)'
re_str = '(<%s>)|(<%s .*?[^/]>)' % (tag, tag)
br_re = re.compile(re_str)
lists = br_re.findall(html)
for li in lists:
for part in li:
if part:
html = html.replace(part, part[:-1] + '/>')
return html创建笔记代码如下
def makeNote(authToken, noteStore, noteTitle, noteBody, parentNotebook=None):
# 闭合 br 和 hr 标签
noteBody = addClose('br', noteBody)
noteBody = addClose('hr', noteBody)
# 为<en-note>补充头部声明
nBody = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>"
nBody += "<!DOCTYPE en-note SYSTEM \"http://xml.evernote.com/pub/enml2.dtd\">"
nBody = '%s%s' % (nBody, noteBody)
# 创建 Note 对象
ourNote = Note()
ourNote.title = noteTitle # 设置标题
ourNote.content = nBody # 设置内容
# 设置所属笔记本
if parentNotebook and hasattr(parentNotebook, 'guid'):
ourNote.notebookGuid = parentNotebook.guid
try:
# 创建笔记
note = noteStore.createNote(authToken, ourNote)
except EDAMUserException, edue:
print "EDAMUserException:", edue
return None
except EDAMNotFoundException, ednfe:
print "EDAMNotFoundException: Invalid parent notebook GUID"
return None
return note-
transCssByAllStyle()
将页面中所有
<style>标签所包含的 css 按照优先级转化为 HTML 标签的内联 style。 -
transId2Name()
在页面中含有 id 的标签内加入前置的
<a>标签,并设置<a>标签的 name和 id 一致。实现印象笔记中锚点链接的作用 -
transCheck2Todo()
将复选框转化成
<en-todo>标签。 -
clearAllClass()
清除所有 class 属性。
-
clearAllUnAllow()
清除所有不符合规则的标签及标签属性。
-
transBody()
清除所有
<head>、<script>、<style>，并将<body>转化为<en-note> -
transCanvas2Background()
将页面中的 Canvas 转换为 img 标签，图像内容以 base64 的方式填入 src 中。
-
transCssByAllLink(callback)
使用 ajax 将页面中所有 type 为 css 的 Link 标签的 css 内容获取，并转为元素的 inline-style。作用和
transCssByAllStyle()类似。（如果 link 的源是跨域的，因为浏览器的同源策略限制，使用这个方法是无效的，所以尽量放到<style>标签里调用transCssByAllStyle()吧。） -
transHtml2Canvas(selector,callback)
将选中的 HTML 片段转换为 Canvas。selector 为选择器，callback 为转换完毕的回调函数。
因为源代码用 ES6 写的，所以需要 gulp 做编译和构建。
- 需要有 node 环境
- 执行
npm install安装构建工具和依赖 - 安装完成后，执行
gulp - 主程序在
src/js/html2enml.js,依赖在src/js/lib中
/dest/js 路径下文件说明：
- html2enml_only.js ：不含依赖的纯 html2enml 类，使用此js 需手动添加 lib 下的依赖。
- html2enml.js：包含依赖的 html2enml 类。
- app_only：不含依赖的 `src/js/app.js 打包。
- app.js：含依赖的
src/js/app.js打包。 - highlight.pack.js：高亮代码的一个js库
样例为 alltest.html文件，可在浏览器环境运行看结果。
一般而言，当HTML中的情况非常复杂，你需要按照一定顺序才能准确高效地完成转换。推荐转换顺序如下：
页面渲染完全结束->
transHtml2Canvas->
transCanvas2Background->
transCssByAllLink->
transCssByAllStyle->
transId2Name->transCheck2Todo->
transBody->
clearAllUnAllow
基本思路就是:
先把不兼容的部分转换为 canvas。
再把所有 canvas 转为 base64式的图片。
再把 css 转为 inline,转兼容的标签。
外层大body 转为 en-note。
最后总体过滤一遍所有不支持的标签和属性。