github.com
获得徽章 0
- 4月26日 星期二 晴 开心
今天她终于约我出去吃饭了，好开心，到了火锅店我发现，她正和另一个男孩子坐一起，她想得真周到，叫上其他人不会容易冷场，我走过去发现他们好像已经吃完了，她说你别吃了去买一下单，她真贴心，知道我最近减肥不能吃太多。我更爱她了！
#恋爱中的最幸福的小事#展开32 - 127
- 分享一个html转pdf的个人思路，当然我还没实现，由于能力和花费时间的原因。
目前我了解到的html转pdf的开源库或者说是在线工具，转换后的效果都不太好。有的会有链接转换后无法点击，或者字体变化了。
我的思路是把html转成markdown，再把markdown转成pdf。markdown的呈现效果转换为pdf后基本是一致的，所以就要考虑如何让html在markdown里显示符合预期。
第一步，html中的css、id、元素标签的样式，内联样式，都需要转换成style写入到每个标签本身的样式里；
第二步，把所有样式里的em、rem替换为对应的px，保证markdown显示效果的一致性；
第三步，压缩这一段html代码，因为html代码自带的缩进会被markdown编辑器识别为代码或者纯文本，百度可以搜索到在线的代码压缩的工具；
第四步，把可识别的html代码放到markdown编辑器中，导出pdf文件。
这里有几个难点，我说一下个人思路。
第一个，如何把所有的css样式替换为内部的style？
答：
1. 获取html文件所有引入的样式可以使用"document.styleSheets"获取html页面中所有的css代码，"document.styleSheets"会返回多个对象(需要用try/catch包裹，不然浏览器会有同源报错，属于浏览器自身的bug)，每个对象对应一个css文件或者内联样式(<style></style>中的css代码)，顺序按照文件顺序、优先级返回。
2. 然后遍历要转换的html的根结点，递归所有子节点，获取每个节点的css样式，代码可以是：
ele.getAttribute('class'); // 返回元素的class字符串；
然后根据返回的每个class来从上面获取的所有css文件里的class依次进行获取，最后设置到每个节点的style属性上；（过于复杂，很难实现）
3. 如果上面的这一步实现了，那么得到的html是可以在markdown编辑器呈现出基本和网页一样的效果，这里还要注意html的左右布局右侧的内容会被显示在左侧的后面，所以有这个限制。
4. 在markdown显示正确后，导出成pdf仍旧会遇到一段文本被显示在2页，可以设置一个有高度的div
至于markdown转pdf的库，可以去github找![[捂脸]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)
展开121
![[耶]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_72.04f3881.png)
![[捂脸]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)